1.使用vue-cli3新建项目：https://CLI . vuejs . org/zh/guide/creating-a-project . html

注意，我这里用吉巴什不好选择选项，我就用了基本的cmd(系统命令提示符):上下箭头和空格键可控制选项。

详细步骤：

vue创建初始化：这里我选择了自定义配置

(2)使用上下箭头和空格进行选择，我这里选择了这四个，之所以没用钢性铸铁预处理程序是因为我的项目中要用postcss-cssnext，后面会有详细配置说明

(3)后面的

使用类样式的组件语法？是否使用班级风格的组件语法？

将巴别塔与以打字打的文件一起用于自动检测聚合填充？是否使用巴别塔做转义？

路由器使用历史模式？是否使用路由的历史模式？

你更喜欢把巴别尔、波斯特、埃斯林等的配置放在哪里？把babel，postcss，eslint这些配置文件放哪？

是否将其保存为未来项目的预设？（是/否)是否记录一下以便下次继续使用这套配置？

2.改项目端口（个人需求): 在根目录新建vue.config.js(vue-cli3其他配置相关也写在这里)

模块。导出={ devserver : { port : 8100，//端口号}}3.根据环境设置相关变量（比如请求地址、打包输出路径等),并打包不同环境代码

(1)在根目录新建appconf.json，保存不同环境的对应变量配置

{ ' dev ' : { ' serverUrl ' : ' http://localhost 336057156/' }，' build ' : { ' serverUrl ' : ' http://build。com/'，outputDir': '././dist/build '，' productId': '111' }，alpha ' : { ' ServerURl ' : ' http://build-test。com/'，outputDir': '././dist/alpha '，' productId': '222' }}(2)src下新建普通文件夹，下面新建configByEnv.js，根据环境设置对应变量值

var path=require(' path ')var appconf=require('././appconf。JSON)var server URL var product id=' ' switch(进程。ENV。node _ ENV){ case ' production ' :服务器URL=appconf。建造。serverurl产品id=appconf。建造。产品id break case ' development ' :服务器URL=appconf。阿尔法。serverurl产品id=appconf。阿尔法。产品id break }//配置建设文件输出路径，可以使用绝对路径或相对路径var outputDirvar reg=/^.(.)?/.*/if(reg。测试(appconf。建造。outputDir)){ if(进程。ENV。NODE _ ENV==' alpha ')outputDir=路径。resolve(_ dirname，appconf.alpha.outputDir) //相对路径else OutPutdir=路径。resolve(_ dirname，appconf.build.outputDir) //相对路径} else { if(process。ENV。node _ ENV==' alpha ')输出dir=appconf。阿尔法。输出目录else输出目录=appconf。建造。输出目录/绝对路径} var conf={输出目录：输出目录，服务器Url:服务器Url，env: process.env.NODE_ENV，productId: productId }模块。导出=conf(3)在需要用以上变量的地方引入即可，如。射流研究…中：var { outputDir }=require(' ./src/common/configbyenv。js’)；分时（同分时)中：从" @/common/configByEnv.js "导入{ ServerURl }；

注意：ts这样引入会报错，需要将tsconfig.json中添加allowJs':真，

-上面针对某些变量根据不同环境设置了不同值，那么打包时只要更改环境，打包后则会取到不同环境对应的特定值-

因为项目中已经有开发环境和打包建设环境，我这里只要再加一个打包希腊字母的第一个字母测试环境：

(1)package.json中添加

{ ' scripts ' : { ' serve ' : ' vue-CLI-service serve '，' alpha ' : ' vue-CLI-service build-mode alpha '，' build ' : ' vue-CLI-service build ' }(2)根目录新建。环境，其内容为：

NODE_ENV='alpha '

(3)在vue.config.js设置打包输出路径

var { outputDir }=require(' ./src/common/configbyenv。js’)；模块。导出={ OutPutdir : OutPutdir，}4 .在项目中引入并配置postcss-nextcss

1.

//NPM installautoprefixer-save-dev在这一步中是不必要的，因为postss-csnext带有这种依赖性

npm安装post CSS-csss next-save-dev

npm安装postss-导入-保存-开发

npm安装postcss-loader - save-dev

2.如果package.json中没有自动生成以下内容，请手动添加以下内容

{ ' postss ' : { ' plugins ' : { ' postss-CSS next ' : { } }，} 5。介绍组件库：我这里用的是elementUI，配置步骤：

第一步：进入项目目录

npm i元素-ui -S

第二步：引入main.js

从' element-ui '导入元素ui ' import ' element-ui/lib/theme-粉笔/index.css' vue.use (element ui)以上是vue-cli3的初始化项目和一些基本配置，可以将ts和css文件从中分离出来。根据个人喜好。然后，愉快地写代码。

摘要

以上是边肖用vue-cli3搭建新项目的介绍，写的基本配置，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！