Vue CLI 3 脚手架搭建

注意 see -> https://cli.vuejs.org/zh/guide/

1. Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
2. Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。
3. 卸载旧版本 npm uninstall vue-cli -g 或 yarn global remove vue-cli
4. 安装 npm install -g @vue/cli 或 yarn global add @vue/cli
5. 你还可以用这个命令来检查其版本是否正确 (3.x)： vue --version

Vue CLI 3 搭建

1. 创建项目

vue create hello-world

2. 你会被提示选取一个 preset
   

3. 默认配置
   

4. 手动配置 （方向键上下移动，空格选中，Enter确定，自定义配置中，您将会看到这些配置项：
   

5. 手动细节配置

//是否使用babel做转义 
?Use class-style component syntax?
//是否使用router
?Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
// css预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS
  Less
  Stylus
//选择语法检测规范
?Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
// 选择 保存时检查 / 提交时检查 
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
//选择配置信息存放位置，单独存放或者并入package.json 
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
//是否保存当前预设，下次构建无需再次配置 
? Save this as a preset for future projects? (y/N)

完成安装

目录

自定义配置文件 vue.config.js

module.config={
    //基本路径
    baseUrl:"/", 
    //输出文件路径
    outputDir:"dist", 
    // eslint-loader 是否在保存的时候检查
    lintOnSave:true,
    //是否使用包含运行时编译器的 Vue 构建版本
    runtimeCompiler:true,
    //https://cli.vuejs.org/zh/config/#chainwebpack
    chainWebpack:()=>{},
    //https://cli.vuejs.org/zh/config/#configurewebpack
    configureWebpack:()=>{},
    //生产环境是否生成 sourceMap 文件
    productionSourceMap:true,
    //css相关配置
    css:{
        // 是否使用css分离插件 ExtractTextPlugin
        extract:true,
        // 开启 CSS source maps?
        sourceMap:true,
        // css预设器配置项
        loaderOptions:{},
        // 启用 CSS modules for all css / pre-processor files.
        modules:false
    },
    // 是否启用dll
    dll:false,
    // PWA 插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    //是否为 Babel 或 TypeScript 使用 thread-loader
    parallel:require('os').cpus().length > 1,
    // webpack-dev-server 相关配置  https://www.webpackjs.com/configuration/dev-server/
    devServer:{
        open:process.platform === 'darwin',//返回当前平台类型('darwin','freebsd','linux','sunos'或者 'win32')
        host:"0,0,0,0",
        port:"8080",
        https:false, //dev-server 通过 HTTP 提供服务
        hotOnly:false,
        proxy:null,
    /*
        proxy:{
            "/api":{
                target:"localhost:8080",
                changeOrigin:true,
                pathRePath:{
                    "^/api":"/mock"
                }
            }
        }
    */
        before(app){}
    },
    //第三方插件配置
    pluginOptions:{}
}

运行

npm run serve   运行
npm run build	打包
npm run lint 	语法检测

运行成功