构建Vue项目的首要条件是node环境；
一.安装Node.js
首先安装node环境，可以直接到中文官网http://nodejs.cn/下载安装包。
安装完成后，wind+R => cmd 进入管理员页面；
node -v npm -v 可以查看版本；
全局安装yarn；
有些小伙伴习惯使用yarn，他和npm同为包管理工具，yarn更新，更快；
通过npm安装全局yarn；
npm i -g yarn（全局安装yarn）
npm uninstall -g yarn （卸载yarn）
yarn -v 查看yarn版本
二.使用 vue-cli（1.x，2.x） 搭建项目（脚手架）
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目，GitHub地址是：https://github.com/vuejs/vue-cli
1.安装 vue-cli
npm install -g vue-cli
但是这种安装方式比较慢，推荐使用国内镜像来安装，所以我们先设置 cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存
同样可以使用 cnpm -v 查看是否安装成功
然后使用 cnpm 安装 vue-cli 和 webpack
cnpm install -g vue-cli
最新的 vue 项目模板中，都带有 webpack 插件，所以这里可以不安装 webpack
安装完成后，可以使用 vue -V （注意 V 大写）查看是否安装成功。
如果提示“无法识别 ‘vue‘ ” ，有可能是 npm 版本过低，可以使用 npm install -g npm 来更新版本
2.生成项目
首先需要在命令行中进入到项目目录，然后输入：
vue init webpack Vue-Project
其中 webpack 是模板名称，可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
Vue-Project 是自定义的项目名称，命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹
配置完成后，可以看到目录下多出了一个项目文件夹，里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
然后进入项目目录（cd Vue-Project），使用 cnpm 安装依赖
cnpm install
然后启动项目
npm run dev
如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用，需要修改一下配置文件 config>index.js
建议将端口号改为不常用的端口。另外我还将 build 的路径前缀修改为 ‘ ./ ‘（原本为 ‘ / ‘），
是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ‘ / ‘ 开头，在本地是无法找到对应文件的（服务器上没问题）。
所以如果需要在本地打开打包后的文件，就得修改文件路径。
3.打包上线
项目开发完成之后，可以输入 npm run build 来进行打包工作
npm run build
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看
项目上线时，只需要将 dist 文件夹放到服务器就行了。
三.安装 3.x @vue/cli
更新到 3.x 之后，vue-cli 的包名从 vue-cli 改成了 @vue/cli
如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x)，首先需要使用以下命令卸载掉
// 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
1.x 和 2.x 的的 vue-cli 采用 init 命令创建项目
四.图形化UI创建项目
但刚入行的前端萌新可能还不习惯命令行的构建方式
于是 vue/cli 3.x 新增了图形化的方式来创建项目
首先还是得在指定目录下打开终端，然后运行：
vue ui
然后浏览器会打开一个页面，可以按照页面将的引导创建项目
五.自定义创建
不过我还是建议使用命令行工具，这才符合一个程序员的身份嘛
vue create project-name
这里的 project-name 是自定义的项目名称，命令执行之后，会生成对应文件夹
1.参数详解
首先需要选择模块
如果选择默认选项 default，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex）
这里推荐选择第二项 Manually select features
然后根据自己的需求，使用空格键选择具体的模块
如果不熟悉上面的模块分别代表什么，可以先按照上图的示意勾选模块
这样就会创建一个包含 vue-router、vuex 和 postcss 的项目
关于 vue-router 和 vuex 可以参考博客：
《Vue 爬坑之路（三）—— 使用 vue-router 跳转页面》
勾选之后，使用回车键进入下一步
这里需要选择路由模式，yes 是 history 模式，no 是 hash 模式
萌新可以先从 hash 模式入手，不过实际项目通常采用 history 模式
然后选择一个合适 CSS 的预编译工具
都不熟悉的话就选 sass 或者 less，因为 stylus 不支持原生 CSS 写法
后面还需要选择 ESLint 的校验规则，格式化的时机，和各个插件的配置项的位置，不熟悉的话就选第一个
然后就有了这样的过程：
最后选择是否将配置项保存为预设，然后配置完成，开始生成项目
项目生成之后，已经自动安装了相关的依赖项，这时候可以直接启动项目：
npm run serve
2. vue.config.js
完成以上步骤之后，就已经可以开发 vue 项目了，但无法满足定制化的开发需求
这时候就需要手动创建一个 vue.config.js，官方的配置文档可以参考这里
这里我贴一个常用的 vue.config.js
// vue.config.js
module.exports = {
baseUrl: ‘/‘,
outputDir: ‘dist‘, // 打包的目录
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
devServer: {
open: true, // 启动服务后是否打开浏览器
host: ‘192.168.1.0‘,
port: 8080, // 服务端口
https: false,
hotOnly: false,
proxy: { // 设置代理
//配置跨域
‘/api‘: {
target: ‘https://代理接口域名‘,
ws:true,
changOrigin:true,
secure: true,
pathRewrite: {
‘^/api‘: ‘‘
}
}
},
before: app => {}
},
}
vue.config.js 还有很多很厉害的配置项
比如构建多页面应用的 pages、改造为 pwa 的配置项 pwa、高级 CSS 打包方案 css
这里就不细说了，如果有兴趣可以仔细研究官方文档
3、环境变量
有过一定开发经验的小伙伴都知道，一个项目通常有三种模式：
开发模式 development、测试模式 test、生产模式 production
而开发中通常会根据环境变量 NODE_ENV 来进行区分这三种开发模式
然后通过很多的 switch... case 来判断
而 3.x 的项目中就不需要写 switch...case 了
直接在根目录下创建以 .env 为前缀的文件
这里的 .env 文件保存的是公用参数，可以在所有模式中获取到
而其他文件中的参数，只能在对应模式中获取到
比如 .env.development 中的参数，就只有在 development 模式下生效
然后在文件内添加对应的键值对
然后在 package.json 的 scripts 命令中添加对应的 mode
// serve、bulid 都有默认的模式，但最好是将模式显式的展现在配置项中
然后就能在项目中获取到对应模式下的值
关于环境变量和模式的详情，可以参考官方文档
————————————————
版权声明：本文为CSDN博主「WiseWrong」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/wisewrong/article/details/55212684
原文：https://www.cnblogs.com/web-gtc/p/14813056.html