vue脚手架vue-cli

一.什么是脚手架

脚手架是一个构建工具,用来构建一个项目基本的目录结构,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 配置路由规则