初次环境搭建
第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中写如下代码:
在package.json中写:
安装路由:
cnpm install vue-router-S
创建/src/router.js并编写路由规则:
在main.js文件中挂载
在视图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代码。