工程化项目搭建
现在可以继续在这个开发目录，开始用以下命令搭建工程化项目
vue create zhihu-app

提示界面进行一些选择，箭头上下选，有默认方式和手动选择。
默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的
图片: https://uploader.shimo.im/f/eOL9ykt4mJAs7bpo.png

可以根据项目大小和功能体验配置不同的功能，空格键 选中/反选，按a键 全选/全不选，按i键反选已选择项， 上下键 上下移动选择。这里只选择了Babel、Router、Vuex、CSS预处理
图片: https://uploader.shimo.im/f/UNr3W00VnO8hZaXg.png

选好后敲回车，会进一步询问细节，Router不要使用history mode，输入n
选择一种CSS预处理的语言，这里选择了 Less
然后会询问你是单独放配置文件，还是放在package.json，选单独配置文件
最后问你要不要把本次配置保存，方便以后直接用这个配置构建项目
图片: https://uploader.shimo.im/f/A6IMDf6KQwMwu3Pm.png
图片: https://uploader.shimo.im/f/poXKeZeaLcAAbftc.png

回车开始构建项目，速度快慢取决于网速和机器配置，构建成功如图所示：
图片: https://uploader.shimo.im/f/7CcxbAIOuDQGpMJO.png

按照提示，进入项目目录，用npm run serve运行项目
图片: https://uploader.shimo.im/f/CUhuwuFxJfwTd7vd.png

不会自动打开浏览器，把地址复制到浏览器打开即可，效果如图，Home和About可以点击切换
图片: https://uploader.shimo.im/f/IlqIueU8HF8aL2Yd.png
四、Q/A
1.修改端口
在项目根目录下新建一个vue.config.js文件：
module.exports = {

devServer: {
    // 可以用域名访问
    disableHostCheck: true,
    //修改成你要的端口
    port: 8888
},
//不在浏览器中显示错误
lintOnSave: false

}
命令行窗口用ctrl+c，退出批处理，然后重新用命令运行你的项目
图片: https://uploader.shimo.im/f/k9IkfXBz5yIBc7dA.png
会发现端口变化了~
更多配置看官网：
https://cli.vuejs.org/zh/config/#vue-config-js
2.运行项目自动打开浏览器
在项目根目录找到package.json文件，找到serve配置项，增加一个--open，如图
图片: https://uploader.shimo.im/f/I87b6s0Vr2EgMhC2.png
重新运行项目即可自动打开浏览器
3.添加新的module
项目开发过程中，会不断地有新的功能需求，需要我们去添加第三方的模块，这和后端不断在pom.xml中添加依赖是一样的，做法如下（比如需要添加axios异步网络请求的库）
在项目根目录找到package.json文件，在dependencies部分添加声明即可
图片: https://uploader.shimo.im/f/ix1pqsG4LFMTdvoZ.png

然后在命令行输入：npm install ，安装一下即可
图片: https://uploader.shimo.im/f/ZLoXwwYJh7s76tQb.png
4.导航随着路由切换变化样式
只需要在相关页面定义一个 .router-link-active 的样式，选中的导航会默认加上这个样式