Vue脚手架介绍

Vue脚手架可以快速生成Vue项目基础的架构。

安装3.x版本的Vue脚手架：

npm install -g @vue/cli

基于3.x版本的脚手架创建Vue项目：

使用命令创建Vue项目

• 命令：vue create my-project
• 选择Manually select features(选择特性以创建项目)
• 勾选特性可以用空格进行勾选。
• 是否选用历史模式的路由：n
• ESLint选择：ESLint + Standard config
• 何时进行ESLint语法校验：Lint on save
• babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
• 是否保存为模板：n
• 使用哪个工具安装包：npm

基于ui界面创建Vue项目

• 命令：vue ui
• 在自动打开的创建项目网页中配置项目信息。

基于2.x的旧模板，创建Vue项目

• npm install -g @vue/cli-init
• vue init webpack my-project

Vue脚手架生成的项目结构

• node_modules:依赖包目录
• public：静态资源目录
• src：源码目录
• src/assets:资源目录
• src/components：组件目录
• src/views:视图组件目录
• src/App.vue:根组件
• src/main.js:入口js
• src/router.js:路由js
• babel.config.js:babel配置文件
• .eslintrc.js:eslint配置文件

16.Vue脚手架的自定义配置

通过 package.json 进行配置 [不推荐使用]

"vue":{
    "devServer":{
        "port":"9990",
        "open":true
    }
}

通过单独的配置文件进行配置，创建vue.config.js

module.exports = {
    devServer:{
        port:8888,
        open:true
    }
}