Vue脚手架基本配置

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

A.安装3.x版本的Vue脚手架：
    npm install -g @vue/cli
    vue -V 查看版本号

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

1).使用命令创建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

 

2).基于ui界面创建Vue项目 (常用)

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

3).基于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:

Vue脚手架的自定义配置

A.通过 package.json 进行配置 [不推荐使用]
    "vue":{
        "devServer":{
            "port":"9990",
　　　　　　　"host":"localhost"
            "open":true
        }
    }
B.通过单独的配置文件进行配置，创建vue.config.js
    module.exports = {
        devServer:{
            port:8888,
　　　　　　　host:'localhost'
            open:true
        }
    }