安装关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。使用以下命令安装这个新的包npm install -g @vue/cli安装之后，用这个命令来检查其版本是否正确 (3.x)vue –version创建一个项目vue create projectname运行以下命令来创建一个新项目：vue create hello-world选择默认(基本的 Babel + ESLint)配置，还是手动配置，上下键控制vue-cli3.0在你创建后会有一个保存当前配置的功能因为之前创建过，提供保存配置的功能,这里选最后一个手动配置一般不要选择eslint 检验你的代码，否则你可能会遇到很多麻烦一般采用 vue-router（路由必备）,vuex（全家桶的状态管理器）,sass（css扩展语言）,babel(使项目可用es6)（你的项目决定你用什么）空格多选TypeScriptPWAVue-routerVuexCSS预处理eslint prettier自动化测试单元测试 、e2e使用图形化界面配置项目vue uiCSS 相关Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。引用静态资源所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源。附上项目的vue.config.jsmodule.exports = { baseUrl: ‘’, outputDir: ‘dist’, //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。 assetsDir: ‘static’, //默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。 filenameHashing: true, pages: { index: { // page 的入口 entry: ‘src/main.js’, // 模板来源 template: ‘public/index.html’, // 在 dist/index.html 的输出 filename: ‘index.html’, // 当使用 title 选项时， // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> title: ‘Index Page’, // 在这个页面中包含的块，默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: [‘chunk-vendors’, ‘chunk-common’, ‘index’] }, }, // eslint-loader 是否在保存的时候检查 lintOnSave: process.env.NODE_ENV !== ‘production’, // 是否使用包含运行时编译器的Vue核心的构建 runtimeCompiler: undefined, // 生产环境 sourceMap productionSourceMap: false, //该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。 configureWebpack: config => { if (process.env.NODE_ENV === ‘production’) { // 为生产环境修改配置… } else { // 为开发环境修改配置… /* var webpack = require(‘webpack’); var webpackConfig = require(’./node_modules/@vue/cli-service/lib/config/dev.js’); var compiler = webpack(webpackConfig); require(‘webpack-dev-middleware-hard-disk’)(compiler, { publicPath: webpackConfig.output.publicPath, quiet: true })*/ } }, //会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 chainWebpack: (config) => { // 链式配置 // var webpackConfig = require(’./node_modules/@vue/cli-service/lib/config/dev.js’); // //配置插件：添加 // config // .plugin(‘webpack-dev-middleware-hard-disk’) // .use(require.resolve(‘webpack-dev-middleware-hard-disk’), { // publicPath:webpackConfig, // quiet: true // }); }, // 配置高于chainWebpack中关于 css loader 的配置 css: { sourceMap: true, loaderOptions: { css: { // 这里的选项会传递给 css-loader }, postcss: { // 这里的选项会传递给 postcss-loader } } }, //所有 webpack-dev-server 的选项都支持 // https://webpack.docschina.org/configuration/dev-server/ devServer: { open: true, host: ’localhost’, port: 3000, https: false, hotOnly: true, // proxy: { // ‘/api’: { // // 目标 API 地址 // target: ‘http://114.55.59.209:8080’,//开发环境 // // target: ‘http://192.168.6.163:8080/’,//域名环境 // //如果要代理 websockets // // ws: true, // // 将主机标头的原点更改为目标URL // changeOrigin: true, // pathRewrite:{ // ‘^/api’:’/’ //这个很重要 // } // } // }, before: app => { } }, // 构建时开启多进程处理 babel 编译 parallel: require(‘os’).cpus().length > 1, // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // 第三方插件配置 pluginOptions: { foo: { // 插件可以作为 options.pluginOptions.foo 访问这些选项。 } }};