vue-cli 3.0脚手架创建vue项目

1. 卸载vue-cli 2.0

npm uninstall -g vue-cli

2. 安装vue-cli 3.0

npm install @vue/cli

3. 创建项目

npm create <项目名>

4. 如果创建出现如下错误： Unexpected end of JSON input while parsing near '...ownload/webpack-0.3.2'，则继续下面的步骤。

5. 执行下面两个操作

（1）npm install --registry=https://registry.npm.taobao.org

（2）npm cache clean --force

（3）删除原来创建的项目文件，重新执行第3条命令 npm create <项目名>

6. 执行npm run serve，即可启动服务，可通过浏览器打开页面链接

成功创建的项目目录结构如下：

7. 可根据需要在项目根目录添加vue.config.js配置文件，并输入如下内容：

 1 module.exports = {
 2      // 基本路径
 3      publicPath: '/',
 4      // 输出文件目录
 5      outputDir: 'dist',
 6      // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
 7      assetsDir: '',
 8      // 以多页模式构建应用程序。
 9      pages: undefined,
10      // eslint-loader 是否在保存的时候检查
11      lintOnSave: true,
12      // 是否使用包含运行时编译器的Vue核心的构建。
13      runtimeCompiler: false,
14      // 默认情况下babel-loader忽略其中的所有文件node_modules。
15      transpileDependencies: [],
16      // 生产环境sourceMap
17      productionSourceMap: true,
18      // webpack配置
19      configureWebpack: () => {},
20      chainWebpack: () => {},
21      // css相关配置
22      css: {
23       // 启用 CSS modules
24       requireModuleExtension: false,
25       // 是否使用css分离插件
26       extract: true,
27       // 开启 CSS source maps?
28       sourceMap: false,
29       // css预设器配置项
30       loaderOptions: {},
31      },
32      // webpack-dev-server 相关配置
33      devServer: {
34       host: '0.0.0.0',
35       port: 8080,
36       https: false,
37       hotOnly: false,
38       proxy: null, // 设置代理
39       before: app => {}
40      },
41      // enabled by default if the machine has more than 1 cores
42      parallel: require('os').cpus().length > 1,
43      // PWA 插件相关配置
44      pwa: {},
45      // 第三方插件配置
46      pluginOptions: {
47       // ...
48      }
49 }