使用vue-cli 3.x搭建vue项目详细步骤以及配置_3.x 版本项目命令-优快云博客

本文链接：https://blog.youkuaiyun.com/l_XIANA/article/details/112184469

<1>创建项目前先要nodejs安装和淘宝镜像安装

下载网站：https://nodejs.org/en/ 点击官网（一路next就可以了）

查看node 版本 node -v

永久使用淘宝镜像命令：npm config set registry https://registry.npm.taobao.org

<2>创建项目

1.在cmd下运行一下命令创建项目 vue create project-demo

在这里插入图片描述

2.选择配置方式 选择 Manually select features

在这里插入图片描述

3.手动配置项目需要的特性选择图中所勾选的
在这里插入图片描述

Babel : Babel编译将ES6编译成ES5
TypeScript: javascript类型的超集
Progressive Web App (PWA) Support: 支持渐进式的网页应用程序
Router:Vue路由
Vuex: Vuex状态管理
CSS Pre-processors:CSS预编译器（包括：SCSS/Sass、Less、Stylus）
Linter / Formatter: 开发规范
Unit Testing: 单元测试
E2E Testing: 端到端测试

4.路由是否采用histrory模式选择y

在这里插入图片描述
5.选择css预编译器这里选择less

SCSS/SASS :Sass安装需要Ruby环境，是在服务端处理的，SCSS 是 Sass3新语法（完全兼容 CSS3且继承Sass功能）
LESS:Less最终会通过编译处理输出css到浏览器，Less 既可以在客户端上运行，也可在服务端运行 (借助 Node.js)
Stylus:Stylus主要用来给Node项目进行CSS预处理支持，Stylus功能上更为强壮，和js联系更加紧密，可创建健壮的、动态的的CSS

6.选择ESLint的代码规范，这里选择 ESLint+Standard config
在这里插入图片描述

7.选择何时对代码进行检测 选择Lint on save
在这里插入图片描述

8.选择单元测试解决方案 这里选择jest
在这里插入图片描述

9.如何存放配置 选择In dedicated config files
在这里插入图片描述
10.是狗否记录一下以便下次是用这套配置：y:记录本次配置，然后需要起个名; n：不记录本次配置

11.确定好，等待初始化完毕

12.初始化完成后，进入项目一些会用到的命令

（1）进入vue-test项目 cd project-demo
（2）启动服务 npm run serve
（3）打包编译 npm build
（4）执行lint npm lint
（5）执行单元测试 npm test:unit

<3>目录结构及vue.config.js配置

在这里插入图片描述

可能会新建的一些目录文件

utils：里面放置一些工具函数，比如常见的axios的封装、防抖、节流函数
styles：里面主要放置的是全局的css文件
filters：里面主要放置全局过滤器文件
directives：里面主要放置全局的一些指令
api：里面主要放置各个页面请求的封装

.prettierrc.js自己定义的配置文件代码自动格式化的规范，复制过来的
.postcssrc.js自己配置的，为解决安装postcss-pxtorem插件px转rem的问题

还需要在根目录下新建 vue.config.js自行配置，简单配置eg：（更多配置详见官网）

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分离插件 ExtractTextPlugin
    sourceMap: false,// 开启 CSS source maps
    loaderOptions: {},// 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: {// 第三方插件配置
    // ...
  }
};