vue-cli3基本项目框架搭建
目录
vue-cli3出来也有一段时间了,但是很多老项目还是用的vue-cli2的结构,最近想折腾一下自己搭一个vue-cli3的前端项目基础框架,也是记录一下吧。
首先安装vue-cli3环境
npm install -g @vue/cli
安装成功后使用:
vue --version
命令来检查所安装的对应版本
创建vue-cli3基本项目结构
使用cd命令,到对应的项目文件夹下面,或者在文件夹下,按住shift+鼠标右键,选择在此处打开PowerShell窗口,或者在此处打开命令行窗口。
运行以下命令来创建一个新项目:
vue create hello-world
其中:hello-world是项目名称,项目名称不能包含大写字母。
我们选择第二个,因为一般项目中都会用到vue-router以及vuex,以及其他的一些自定义配置;
使用babel,router,vuex,css预编译,格式化校验。
输入y,回车,使用history模式,也可以根据具体的需要,选择。
这里我们使用node-sass来编译scss/sass,也可以根据具体情况选择
ESLint配置,选择默认选项
这些插件的配置方式,我用的是默认的配置文件。
以后是否使用这个配置,根据实际情况来选择,我们先选择n。
然后等待模板下载,文件生成。
到这里基本的文件模板就已经生成完成。
vue-cli3中基本的文件结构
他的整个文件结构,基本上跟vue-cli2还是保持一致的,但是少了一个config文件夹,对于我们开发的时候来说,就关心几个点,router,propxyTable,以及package.json。
首先是package.json:
首先一个,最大的区别就是我们的启动命令,从以前的npm run dev ,变成了npm run serve。
还有就是vue-cli3独有的vue-cli插件,详细介绍参考vue-cli文档:https://cli.vuejs.org/zh/dev-guide/plugin-dev.html
@vue/cli- xxx 开头的就是vue-cli的插件。
配置项的修改
既然可以启动服务了,那么我们启动服务的端口,访问API的后台代理在哪里配置?
vue-cli3的配置详情可以参考vue-cli文档:https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
这里我们在package.json同级目录下新建文件:vue.config.js
module.exports = {
devServer: {
port: 8088, // 端口号
host: "localhost",
https: false, // https:{type:Boolean}
open: false, //配置自动启动浏览器
// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
proxy: {
"/api": {
target: "<url>",
ws: true,
changeOrigin: true
},
"/foo": {
target: "<other_url>"
}
} // 配置多个代理
},
lintOnSave: false // 关闭eslint代码检查
};
粘贴代码,并根据需要改变配置选项。
至此,基本的vue-cli项目已创建完毕,下一篇文章会讲关于第三方插件库的引用,vuex和vue-router的结构化调整,优化,axios的引入和封装。
转载地址:
https://blog.csdn.net/ttuuyyu/article/details/95621617