携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情
vue-CLI
1.什么是vue-cli(Command Line Interface)
Vue-CLI是vue官方提供的脚手架工具,
默认已经帮我们搭建好了一套利用webpack管理vue的项目结构
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
- 通过
@vue/cli实现的交互式的项目脚手架。 - 通过
@vue/cli+@vue/cli-service-global实现的零配置原型开发。 - 一个运行时依赖 (
@vue/cli-service)，该依赖：- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 可以通过项目内的配置文件进行配置；
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
2.使用vue-cli
2.1安装
npm install -g @vue/cli OR yarn global add @vue/cli
检查版本:vue --version
2.2升级
npm update -g @vue/cli OR yarn global upgrade --latest @vue/cli
2.3创建vue
vue create project-name
3.vue文件目录
接下来是我选择默认的创建vueDefault
src文件夹: 代码文件夹
|----assets文件夹: 存储项目中自己的一些静态文件(图片/字体等)
|----components文件夹: 存储项目中的自定义组件(小组件,公共组件)
|----views文件夹: 存储项目中的自定义组件(大组件,页面级组件,路由级别组件)(默认没有)
|----router文件夹: 存储VueRouter相关文件(默认没有)
|----store文件夹: 存储Vuex相关文件(默认没有)
|----App.vue:根组件
|----main.js:入口js文件
4.手动配置流程
-
选择手动配置
-
选择需要的配置
-
-
-
-
-
-
-
上述的步骤完成后,你已经创建成功了vue文件
5.修改webpack配置
vue.cli2.x
在Vue-CLI2.x中生成的项目结构中build文件夹和config文件夹
这两个文件夹中存储了webpack相关的配置, 我们可以针对项目需求修改webpack配置
vue.cli3.x
在Vue-CLI3以后生成的项目结构中已经没有了build文件夹和config文件夹
这么做的目的是为了化繁为简, 让初学者不用关心webpack, 只用关心如何使用Vue
5.1为什么要修改
默认情况下通过Vue-CLI创建的项目已经自动给我们配置好了webpack
但是有时候默认的配置可能不能满足我们的需求, 例如我们想修改输出目录名称, 想增加一些插件等
5.2如何修改webpack配置
新建vue.config.js去修改webpack配置
注意:
Vue-CLI为了方便起见对webpack原有的属性进行了一层封装, 如果我们需要修改webpack的配置那么我们可以在项目中新建一个
vue.config.js的文件, 然后去查询Vue-CLI的封装是否能够满足我们的需求如果可以满足我们的需求, 那么就使用Vue-CLI封装的属性来修改
webpack的配置
当你还是不满足,或者用的不习惯可以在vue.config.js 中通过configureWebpack 去编写原生的webpack配置
