vue-cli

主要参考：https://www.jianshu.com/p/1626b8643676

1、安装node.js

到node.js官网下载并安装node，一直下一步，安装完成后打开命令行，输入 node -v，查看版本号，如果如下图，说明以成功安装：

在官网下载安装node.js后，就已经自带npm（包管理工具）了。

2、安装淘宝镜像

打开命令行，输入 npm install -g cnpm --registry=https://registry.npm.taobao.org ，安装这个是因为我们用的npm的服务器是外国，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v，如下图，说明成功了：

3、安装webpack

命令行输入 npm install webpack -g ，安装完成之后输入 webpack -v，如果如下图，说明成功：

4、安装vue-cli

命令行 npm install vue-cli -g ，安装完成之后输入 vue -V（注意这里是大写的“V”），出现下图，说明成功：

通过以上四步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

5、具体使用

命令行进入一个目录，输入：

vue init webpack hello-vue-cli   // hello-vue-cli 是项目的名称

之后，就会弹出如下代码：

? Project name (hello-vue-cli)   // 项目的名称
? Project description (A Vue.js project)   // 项目的描述
? Author Datura   // 项目的创建者
? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users   // 大部分用户选这个就选这个好了
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
nder functions are required elsewhere
? Install vue-router? (Y/n)   // 是否安装 vue 路由， 选 y
? Use ESLint to lint your code? (Y/n)   // 是否启用 ESLint 代码规范检测
? Set up unit tests (Y/n)   // 单元测试 
? Setup e2e tests with Nightwatch? (Y/n)   // e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM   // 使用npm
  Yes, use Yarn
  No, I will handle that myself

经过上面一系列配置，就会自动生成项目，

根据提示，命令行输入：

cd hello-vue-cli   // 进入项目目录

回车之后，继续输入：

npm run dev   // 运行项目

现在就可以在浏览器输入 http://localhost:8080来访问项目了。

现在为止，项目目录下的文件如下：

具体说明一下，每个文件夹的作用：

image.png