码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-10-13 19:09:37      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:详细   模板   脚本   git   下一步   逻辑   创建目录   you   temp   

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样式

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

标签:详细   模板   脚本   git   下一步   逻辑   创建目录   you   temp   

原文地址:http://www.cnblogs.com/qiuchuanji/p/7662314.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!