当前位置: 代码迷 >> 综合 >> 安装 vue-cli3.0
  详细解决方案

安装 vue-cli3.0

热度:60   发布时间:2023-10-26 15:10:15.0

1.npm I @vue/cli -g 安装 vue-cli3.0

vue安装教程

2. Vue -v 检查vue-cli版本

3. vue create admin 创建项目

4.选择项目需要的的配置项(网上有很多例子这里就不做过多的阐述了···)

5.创建完项目我们就能看到这样的文件目录,相对之前的有很些的改动

是不是相对2.0精简了很多。

由于 vue-cli 3 采用了的零配置的思路,所以项目初始化后,没有了以前熟悉的 build 目录,也就没有了 webpack.base.config.js、webpack.dev.config.js 、webpack.prod.config.js 等配置文件。

那么,我们该如何去配置自己的项目了?不用担心,只需要在项目的根目录下新建 vue.config.js 文件(是根目录,不是src目录)

这里提供一个模板

module.exports = {baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist'',构建之前会被清除)assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错index: {//除了 entry 之外都是可选的entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件template: 'public/index.html',// 模板来源filename: 'index.html',// 在 dist/index.html 的输出title: 'Index Page',// 当使用 title 选项时,在 template 中使用:<title><%= htmlWebpackPlugin.options.title %></title>chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块,默认情况下会包含,提取出来的通用 chunk 和 vendor chunk},subpage: 'src/subpage/main.js'//官方解释:当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'},lintOnSave: true,// 是否在保存的时候检查productionSourceMap: true,// 生产环境是否生成 sourceMap 文件css: {extract: true,// 是否使用css分离插件 ExtractTextPluginsourceMap: false,// 开启 CSS source mapsloaderOptions: {},// css预设器配置项modules: false// 启用 CSS modules for all css / pre-processor files.},devServer: {// 环境配置host: 'localhost',port: 8080,https: false,hotOnly: false,open: true, //配置自动启动浏览器proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )'/api': {target: '<url>',ws: true,changeOrigin: true},'/foo': {target: '<other_url>'}}},pluginOptions: {// 第三方插件配置// ...}

当然你也可以使用图形化命令(vue ui)创建项目