参考文档: www.cnblogs.com/wisewrong/p…
一、安装 @vue/cli 脚手架
npm install -g @vue/cli
安装完成后，可以使用 vue -V （这个 V 是大写的）查看版本号 注意:@vue/cli 依赖于webpack,在使用之前,先安装webpack\
npm install webpack -g
二、创建项目
vue create project-name
这里的 project-name 是自定义的项目名称，命令执行之后，会生成对应文件夹
三, 项目生成之后，已经自动安装了相关的依赖项，这时候可以直接启动项目：
npm run serve // yarn serve
四, 完成以上步骤之后，就已经可以开发 vue 项目了，但无法满足定制化的开发需求 这时候就需要在根目录手动创建一个 vue.config.js
vue.config.js
module.exports = {
publicPath:'/', // 启动页地址
outputDir: 'dist', // 打包的目录
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
devServer: {
open: true, // 启动服务后是否打开浏览器
host: '0.0.0.0',
port: 8080, // 服务端口
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
}
以上是vue/cli 3.x/4.x的写法, 手动创建vue.config.js 在vue/cli5.x之后, 项目搭建时,vue.config.js会自动创建, 结构如下
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath: '/', // 启动页地址
outputDir: 'dist', // 打包的目录
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
devServer: {
open: true, // 自动打开浏览器访问主页
host: 'localhost', // 主页地址
port: 8080, // 端口号
proxy: null, // 设置代理
}
})
五 ,当项目完成时,如何打包发布? (1)打包:项目开发完成之后,代码行执行命令
npm run build
编译并重新构建项目,然后在项目目录下生成一个 dist 文件夹 (2)发布: 只需要将dist文件夹中的所有内容复制到服务器(IIS / node / apache)的静态文件夹中即可
