创建一个新的vue-cli项目

1.检查node版本

node版本

2.检查vue的版本

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


创建一个新的vue-cli项目_第1张图片
启动成功

你可能感兴趣的:(创建一个新的vue-cli项目)