创建一个vue项目（webpack 和 vue-cli3）

一、构建项目（需要用webpack）

1.在命令行先到自己要存放的目录下，然后输入以下代码初始化一个项目

解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中vueDemo是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。

vue init webpack vueDemo

 然后按照步骤提示一步步选择

? Project name  输入项目名称

? Project description 输入项目描述(不需要就回车)

? Author 作者

? Vue build 打包方式，回车就好了

? Install vue-router?  选择  Y 使用 vue-router，输入 N 不使用

? Use ESLint to lint your code? 代码规范，推荐 N

? Setup unit tests with Karma + Mocha? 单元测试，推荐 N

? Setup e2e tests with Nightwatch? E2E测试，N

接下来就等待项目搭建好。

在install途中会报警告WARN

在官网的API文档中查阅为版本的问题This version has been deprecated此版本已被弃用。
详情可FQ到官网API详细了解。https://www.npmjs.com/package/browserslist/v/2.11.3
不过一般来说警告对项目的创建不会带来太大的影响，只要可以npm run dev可成功运行可以根据个人选择不处理。

二、运行项目

好了，现在我们已经建立好自己项目了。但是还没初始化。

cd <project name>    // cd 你刚才写建立的项目名。进入。

cnpm install    // 初始化项目，安装依赖。

运行该项目，测试一下该项目是否能够正常工作，这种方式是用nodejs来启动。

cnpm run dev

 

 方法2

使用vue-cli3安装

在要生成项目的目录下进入dos界面

vue create project-name    //project-name是你要创建的文件夹名字

第一行是我一开始有以前的设置好了的依赖。

如果第一次使用则只有后两行

//babel是一个解析器，就是把es6转换成es5使代码向下兼容
//eslint是一个代码格式规则，使你代码规范下编写
defalt(babel, eslint)   //默认依赖 
Manually select features    //手动选择需要安装的依赖

这里选择最后一个。

 

新手如果想要体验，则只需要选择babel和linter就行了，回车进入下一步

//按上下键去移动，空格选择，a键全选，i键反选 *表示选择
Babel
TypeScript    //一种语言，js的进阶。类似java
Progressive Web App (PWA) Support       //渐进式
Router    //vue路由
Vuex    //状态管理机
CSS Pre-processors    //以后用到sass或者scss
Linter / Formatter      //规范层面。(eslint)
Unit Testing    //单元测试
E2E Testing    //端对端测试

 这里我选择了css pre-oricessors

 我选择了dart

Sass/SCSS (with dart-sass)    //运行处时速度比node块
Sass/SCSS (with node-sass)    
Less    //不同语法
Stylus    //不同语法

在ESlint中选择指定的代码规范

 我选择了最后一个。如果初次使用建议第一或者Standard，回车进入下一步

ESlint with error prevention only    //仅仅是错误预防
//不同公司的代码规范
ESlint + Airbnb config    //爱彼迎严格的一批
ESlint + Standard config    //基础的规范
ESlint + Prettier    //更好的规范

这里就字面意思。当保存的时候执行代码规范还是在提交的时候，肯定选择第一个

 你希望配置文件放在哪里？我个人建议不要放在package.json和依赖一起混淆。所以选第一个独立放在一个文件

 然后下一步是是否保存这些选择成为一个预设，no吧，之后就开始配置了。

 然后就根据提示一步步进行下去就ok了。