实战Vue简易项目（1）初始化环境配置

本章以下命令都是在cmd命令行中进行的。

安装命令行

npm i -g vue-cli

安装完成后，输入vue -V返回版本号，即安装成功；

初始化项目

切换到项目目录下

项目目录，即项目所在目录。

目前，我们还没有创建项目，进入 预期项目目录 的上一级文件目录下即可。

本文以个人电脑目录演习cd /d e:/tutors/，请自动对应自己的学习所用路径。

使用脚手架初始化项目

vue init webpack vue最后一个vue为项目名称，可以自定义其它名称：vue init webpack aaa。

初始化过程会为您定制初始化环境,以下是我的定制：

? Project name vue  //项目名称
? Project description A Vue.js project //项目描述
? Author //作者
? Vue build standalone
? Install vue-router? Yes  //是否需要vue-router
? Use ESLint to lint your code? No  //是否需要ESLint进行代码风格检测
? Set up unit tests No  //是否需要单元测试
? Setup e2e tests with Nightwatch? No  //是否需要端到端测试；
? Should we run `npm install` for you after the project has been created? (recommended) npm  //选择安装项目依赖的工具

操作都是yes || no，然后回车。
当然，默认选择yes，不必输入，直接回车。
选择no的话，需要输入，然后回车。

初始化完成的结果如下：

初始化项目结构

dir vue查看初始化项目目录结构：

e:\tutors>dir vue
 驱动器 E 中的卷是 文档
 卷的序列号是 B4A1-7185

 e:\tutors\vue 的目录

2018/07/29  09:32    <DIR>          .
2018/07/29  09:32    <DIR>          ..
2018/07/29  09:31               230 .babelrc  //babel配置文件
2018/07/29  09:31               147 .editorconfig  //编辑器配置文件
2018/07/29  09:31               154 .gitignore  //Git管理忽略文件配置
2018/07/29  09:31               246 .postcssrc.js  //postcss配置文件
2018/07/29  09:31    <DIR>          build  //生产、开发环境配置产出文件；
2018/07/29  09:31    <DIR>          config  // 生产、开发环境配置基础文件；
2018/07/29  09:31               265 index.html  //HTML模板；
2018/07/29  09:32    <DIR>          node_modules  //NPM依赖包；
2018/07/29  09:32           371,973 package-lock.json  //项目依赖版本等信息文件
2018/07/29  09:31             1,733 package.json  //项目依赖配置文件；
2018/07/29  09:31               460 README.md  //Markdown说明文档；
2018/07/29  09:31    <DIR>          src  //项目源文件（开发所在）
2018/07/29  09:31    <DIR>          static  //我没用该文件...
               8 个文件        375,208 字节
               7 个目录 32,987,131,904 可用字节

运行项目

cd vue切换到自己的项目目录下，npm run dev可以将该初始化项目运行在开发环境下。

运行结果如下：

章节回顾

• 初始化项目所需要的依赖有哪些？
• 如何初始化项目？
• 如何运行项目，为什么可以这样简便的运行？

思考

• 如果使用CSS预处理，需要做什么，还是什么都不需要做就可以呢？
• 如果想在局域网其它端访问，需要做什么，还是什么都不需要做就可以呢？