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配置文件,并输入如下内容:
#vue.config.js 完整默认配置 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // 用于嵌套生成的静态资产(js,css,img,fonts)的目录。 assetsDir: '', // 以多页模式构建应用程序。 pages: undefined, // eslint-loader 是否在保存的时候检查 lintOnSave: true, // 是否使用包含运行时编译器的Vue核心的构建。 runtimeCompiler: false, // 默认情况下babel-loader忽略其中的所有文件node_modules。 transpileDependencies: [], // 生产环境sourceMap productionSourceMap: true, // webpack配置 configureWebpack: () => {}, chainWebpack: () => {}, // css相关配置 css: { // 启用 CSS modules modules: false, // 是否使用css分离插件 extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, }, // webpack-dev-server 相关配置 devServer: { host: '0.0.0.0', port: 8080, https: false, hotOnly: false, proxy: null, // 设置代理 before: app => {} }, // enabled by default if the machine has more than 1 cores parallel: require('os').cpus().length > 1, // PWA 插件相关配置 pwa: {}, // 第三方插件配置 pluginOptions: { // ... } }