vue环境搭建(webapp)

初次环境搭建

第1步:安装Node.js 去node.js官网下载windows对应版本,安装即可。 

 验证node.js是否安装成功: 

                         node -v npm -v

第2步:解决npm安装第三方模块很慢问题,建议使用cnpm淘宝镜像  

官网地址:https://developer.aliyun.com/mirror/NPM?from=tnpm 

  全局安装cnpm这个工具  -g 表示全局安装,一次安装,永久使用 

                         npm install -g cnpm 

--registry=https://registry.npm.taobao.org 

第3步:安装vue脚手架工具 -g 表示全局安装 

                         cnpm install @vue/cli -g 

第4步:创建vue项目先进入目标目录 

                          vue create vue-study 

在创建项目的过程中,可能会涉及到vue版本的选择,建议选择2.0  如果还需要选择包管理工具,建议使用 npm

第5步:启动vue项目  # 进入项目的根目录 

                            npm run serve 

 在浏览器中通过本地服务来访问vue项目 自己配置一个start命令  npm start

如果当前代码没有node_modules包 执行`cnpm install`可以根据package.json文件进行重装




多次搭建后

在 Git Bash命令行中

创建vue文件夹 :

vue create hello-world(项目名)

进入hello-world文件夹:

cd /d/hello-world

安装状态管理 : 

cnpm install vuex -S 

vscode中在package.json旁边创建一个vue.config.js文件

在vue.config.js中写如下代码:


proxy代理https,解决跨域问题’。‘/api’表示需要去匹配请求的url,然后替换成target的值

在package.json中写:


命令启动方便

安装路由:

cnpm install vue-router-S

创建/src/router.js并编写路由规则:


在src中创建一个routes文件夹,在里面创建路由页面

在main.js文件中挂载


引入router,并挂载

在视图app.vue中使用<router-view></router-view>放在div标签中

安装sass:    

                         cnpm install sass-loader -D

                         cnpm install node-sass -D

                         组件中的style标签,使用lang='scss'指定CSS语言类型


安装van组件库:

                        Vant官方文档:https://vant-contrib.gitee.io/vant/#/zh-CN/

                        cnpm install vant -S

                        cnpm install babel-plugin-import -D

                        Babel是运行在Node.js环境中的JS编译器。

                        它的作用是把ES6代码转化成浏览器兼容性更好的ES5代码。

在babel.config.js中进行配置

配置完成后,重启项目即可

在浏览器访问localhost:8001查看项目

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。