Vue-cli的安装步骤详细版本

Posted 2020-10-10 乐得逍遥

https://github.com/vuejs/vue-cli 官网 使用官方推荐的webpack

条件：
node在4.以上，npm在3以上
使用$npm install -g vue-cli

安装步骤：
1、cmd打开命令行窗口
2、输入npm install -g vue-cli，然后回车等待
3、安装结束后输入vue -V 如果显示版本号继续下一步操作
4、vue init webpack 后面接上要创建的目录名回车
5、显示Project nanme 目录名 回车 project description 后面可以写上描述，或者直接回车
Author 后面可以写作者也可以回车
6、Install vue-router? 选择Y
7、User ESLint to lint your code? 选Y
8、Setup unit tests with Karma + Mocha? 问的是否要测试 选n
9、Setup e2e tests with Nightwatch? 选n
10、这个时候在你创建的目录下就有你的目录了，然后cd 你的目录名进去npm install回车等待
11、创建结束后在创建目录里面按住shift+右键 选择 在此处打开命令窗口 输入npm run dev启动应用，启动成功它会自动打开一个vue页面
12、每次这样启动是很麻烦的，用开发工具加载整个项目，里面有个package.json，它我整个项目的配置和信息的描述，里面有个scripts,这是定义的一些脚本，刚才用的就是里面的dev，它会执行后面的东西，就是用node跑一个JSON文件
13、在项目中，右击package.json选择show npm scripts,显示npm后，双击命令即可

main.js的介绍
el是挂载点，router是路由

App.vue 是整个文件的入口，有三部分，template模板 script 逻辑 style样式