vue cli快速搭建网站步骤及参数详解

以TP6+vue3+vue cli4.5.6+element UI为例，vue的web工程放在/public下
一、准备
①已安装node.js（vue cli4.x，node是v10以上版本），npm
②没有旧版vue cli，如有，卸载

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

二、搭建工程
1、创建项目

vue create 项目工程名称

1、之前设置默认的vue2配置
2、之前设置默认的vue3配置
3、自定义

按需选择：（空格选中 回车进入下一步）

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)

>(*) Choose Vue version ##选择vue版本
 (*) Babel             ##转码器，将ES6代码转为ES5代码，从而在现有环境执行。
 ( ) TypeScript	       ##TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
 (*) Progressive Web App (PWA) Support  ##Web应用程序支持
 (*) Router  ##vue路由管理
 (*) Vuex   ##vue的状态管理
 (*) CSS Pre-processors ##css预处理器（如：less、sass）
 (*) Linter / Formatter ##代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing ##单元测试
 ( ) E2E Testing #end to end 测试

Vue CLI v4.5.6
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.5.6 → 5.0.3   │
│    Run npm i -g @vue/cli to update!     │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
  2.x
> 3.x (Preview)

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n ##用之前的router模式

选择一款css预处理器

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
> Less
  Stylus

选择一个格式化配置，看个人习惯，如果多个空格都要你格式化下才不报错，那选严格模式，这个用的也比较多

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only ##只进行报错提醒
  ESLint + Airbnb config   ##不严谨模式
  ESLint + Standard config ##标准模式
  ESLint + Prettier ##严格模式

代码检测方式

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save ##保存时检测
 ( ) Lint and fix on commit ##提交是检测

依赖放置的目录文件：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files  ##依赖专用的配置的文件
  In package.json   ##根目录的package.json包

是否预设为将来的项目中，在vue creat 项目 这一步能看到，基本是不同项目不同设置，选择N

? Save this as a preset for future projects? (y/N)

Installing CLI plugins. This might take a while… 安装cli插件，需要花些时间

等待ing…

安装成功，cd web-uniapp 运行 npm run serve，

DOC命令 等同hbuilder X中，

新建vue.config.js，并配置

module.exports = {
	publicPath: "./",
	// 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath
	// baseUrl: process.env.NODE_ENV === 'production' ? './' : '/' 
	// publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
	// 输出文件目录：在npm run build时，生成文件的目录名称 
	outputDir: 'dist',
	// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 
	// assetsDir: "static",
	assetsDir: '', //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
	indexPath: 'index.html', //指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。

	// 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 
	productionSourceMap: false,
	// 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
	filenameHashing: false,
	// 代码保存时进行eslint检测
	lintOnSave: true,
	// webpack-dev-server 相关配置
	devServer: {
		// 自动打开浏览器
		open: true,
		host: '0.0.0.0',
		// public:'192.168.1.10:8080',
		// 端口
		port: 8080,
		// https
		https: false,
		// 热更新
		hotOnly: false,
		// 使用代理
		proxy: {
			'/api': {
				// 目标代理服务器地址
				target: 'http://www.yourwebsite.com,
				// 开启代理，本地创建一个虚拟服务器 允许跨域
				changeOrigin: true,
			},
		},
	},
}

打包

查看下 工程名/package.json的命令 是npm run build

安装element-plus

npm install element-plus --save

配置main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from 'element-plus' // 引入element-plus
import 'element-plus/theme-chalk/index.css' // 引入element-plus的样式

createApp(App)
.use(store)
.use(router)
.use(ElementPlus, { zIndex: 3000, size: 'small' }) // 使用element-plus
.mount("#app");

运行如下图：发现图标没显示

这里有坑，就是官方的同一份文档出的buttons案例用的是 ts的icon ，icon的图标单独装。安装图标：

npm install @element-plus/icons-vue

修改main.js

再运行如下效果：