1.检查node版本
2.检查vue的版本
3.创建vue-cli的脚手架
vue init webpack jsPlumb
4.选择安装的理解
注释
:(1)这里创建Vue 的项目有几种,常见的是:webpack 、webpack-simple、browserify、browserify-simple、simple等等, 一般大型项目主要推荐webpack,而个人或者是业务逻辑并没有那么复杂的话推荐使用webpack-simple
(2)vuefirstdemo:----->表示的是文件名,也就是项目名
(3)Projectname(vuefirstdemo):----->项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错: Sorry,name can no longer contain capital letters 应将项目名改为小写(*)
(4)Projectdescription(A Vue.js project):---->项目描述(可写可不写),也可直接回车,使用默认名字
(5)Author():---->作者,看作者自己,怎么写,默认也可以。
(6)Runtime+Compiler:recommendedformost users 运行加编译,既然已经说了推荐,选择即可推荐是: Runtime-only:about 6KB lighter min+gzip,buttemplates(or any Vue-specificHTML)are ONLY allowedin.vue files-render functions are required elsewhere 仅运行时,已经有推荐了就选择第一个了
(7)Install vue-router?(Y/n)是否安装vue-router,看项目需求,输入"y",回车则安装,一般情况下都会需要到。
(8)Use ESLint to lint your code?(Y/n)是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,这个是一个好的习惯,使用推荐大家使用。
(9)Pick an ESLintpreset(Use arrow keys)选择一个ESLint预设,编写vue项目时的代码风格,直接y回车
(10)Setup unit tests with Karma+Mocha?(Y/n)是否安装单元测试,这个看自己了
(11)Setup e2e tests withNightwatch(Y/n)?是否安装e2e测试 ,也是看自己项目,直接回车
5.vue-cli项目目录
(1).build:---->构建项目脚本目录
(2).config:---->构建配置目录:如端口号等(
3).node-modules:---->依赖的node库文件
(4).src:---->主要源代码编写地方, src/assets:----->资源文件,
如:css、img、js等,
components:----->自定义组件编写位置,
router:----->路由,
App.vue:----->vue 的根组件,
main.js:----->主函数入口文件,
(5).static:----->静态文件目录
(6).test:----->测试文件目录
(7)..eslintignore和.eslintrc.js:----->ES语法的配置文件
(8).index.html:------>入口文件
(9).package.json:----->项目描述文件
6.运行项目
1.npm install
2.npm run dev