Johnny

博观而约取
厚积而薄发

vue工程化项目搭建

1.png
工程化项目搭建
现在可以继续在这个开发目录,开始用以下命令搭建工程化项目
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 的样式,选中的导航会默认加上这个样式

本原创文章未经允许不得转载 | 当前页面:Johnny-韩源-期待与你分享生活的每一天 » vue工程化项目搭建

评论