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中使用放在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查看项目