一.什么是脚手架
脚手架是一个构建工具,用来构建一个项目基本的目录结构,vue项目是基于webpack基础的
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目
二.使用vue cli
脚手架的场景
当我们要开启一个新的vue项目时,第一件事就是建基本的目录结构,为了能够搭建一个具有完整打包功能的目录结构,我们采用vue官方提供的,这就需要我们在node的环境下进行安装
三.vue脚手架的安装步骤以及使用
1.全局安装 npm i -g vue-cli
2.通过vue命令初始化一个带有webpack模板的项目结构:
vue init webpack projectName
初始化过程一些配置选项参考
Project name :默认
Project description :默认
Author :默认
Vue build :选择 Runtime + Compiler
Install vue-router? :Y
Use ESLint to lint your code? :Y 选择 Standard
Set up unit tests :n
Setup e2e tests with Nightwatch? : n
Should we run `npm install` for you after the project has been created? (recommended) : Yes, use NPM
3.进入项目目录
cd projectName
4.运行项目
npm run dev/npm start
5.点击运行后客户端提供的URL即可以打开项目的首页
如果我们想要执行npm run dev
命令后自动打开项目首页,需要手动修改目录中package.json
文件的script
节点的dev
属性,在原来的基础上添加--open
参数即可
"dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js"
四.注意事项
1..我们使用脚手架构建vue项目时候,只需要修改src目录的内容即可
2.去公司以后,拿到项目,第一件事情就是:
npm run dev/npm start
3.初始化项目报错
- 清除 npm 缓存文件:
npm cache clean --force
4.如何关闭 ESLint 代码风格校验
- 在
config/index.js
中将useEslint
设置为 false
5.自定义 ESLint 校验规则
- 在
.eslintrc.js
中添加'space-before-function-paren': 'off'
关闭 方法名字后的空格校验规则 - 前提:使用了VScode 配置( prettier )
6.目录结构的总结
- 只需要在 src 目录中写 Vue 代码即可,其他的目录暂时不要动它
7.src 目录结构的说明
/assets 放置资源文件,比如:图片、css
/components 放项目中所有的组件
/router 路由配置
App.vue 根组件
main.js 项目的入口文件,Vue实例就是在这个文件中创建的
8.Vue 不同构建版本的说明
-
1 完整版(运行时+编译器)
-
2 运行时(体积比完整版小 30%)
-
3
import Vue from 'vue'
默认导入的是:运行时版本 -
4 如果要使用完整版,需要在 webpack 中添加一个 alias 配置才可以
build/webpack.base.conf.js
中 resolve 的 alias
// 完整版:
new Vue({
el: '#app',
router,
// 脚手架生成的项目中,默认采用完整版(运行时+编译器)
components: { App },
template: '<App/>'
})
// 运行时版:
const vm = new Vue({
el: '#app',
data: {},
render: c => c(App)
})
9.@符号的说明
- 在 vue cli 生成的项目中
@
符号就表示src
路径
五.如何添加一个新的功能
添加一个
login
模块
- 1 在
components
中新建一个文件夹(login),在文件中创建组件(Login.vue) - 2 在
router/index.js
中导入组件(Login.vue) - 3 配置路由规则