vue脚手架vue-cli

1,465 阅读3分钟

一.什么是脚手架

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