脚本宝典收集整理的这篇文章主要介绍了Vue CLI3开发环境搭建,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
使用以下命令安装这个新的包
npm install -g @vue/cli
安装之后,用这个命令来检查其版本是否正确 (3.x)
vue --version
vue create projectname
运行以下命令来创建一个新项目:
vue create hello-world
选择默认(基本的 Babel + ESLint)配置,还是手动配置,上下键控制
vue-cli3.0在你创建后会有一个保存当前配置的功能
因为之前创建过,提供保存配置的功能,这里选最后一个手动配置
一般不要选择eslint 检验你的代码,否则你可能会遇到很多麻烦
一般采用 vue-router(路由必备),vuex(全家桶的状态管理器),sass(css扩展语言),babel(使项目可用es6)
(你的项目决定你用什么)空格多选
TypeScript
PWA
Vue-router
Vuex
CSS预处理
eslint prettier
自动化测试单元测试 、e2e
vue ui
dist 目录为 运行 npm run build 构建后的项目
main.js 为入口文件
vue.config.js 为项目配置文件
vue.config.js里
大概包括了配置 常用的输出路径名、跟目录、预处理、devServer配置、pwa、dll、第三方插件等等
详细配置可以看官方文档 详细config配置
在项目根目录 创建二个文件
.env.development
.env.production
#.env.development
#键值对,必须以VUE_APP开头
VUE_APP_development_URL = 'http://xxxx.xxx.xx.xx/mockjs/'
#.env.production
#键值对,必须以VUE_APP开头
VUE_APP_production_URL = 'http://xxxx.xxx.xx.xx/production/'
//main.js中使用
const service = axios.create({
baseURL: process.env.VUE_APP_development_URL
})
直接上代码
//所有 webpack-dev-server 的选项都支持
// https://webpack.docschina.org/configuration/dev-server/
devServer: {
open: true,
host: 'localhost',
port: 3000,
https: false,
hotOnly: true,
proxy: {
'/api': {
// 目标 API 地址
target: 'http://114.55.59.209:8080',//开发环境
// target: 'http://192.168.6.163:8080/',//域名环境
//如果要代理 websockets
// ws: true,
// 将主机标头的原点更改为目标URL
changeOrigin: true,
pathRewrite:{
'^/api':'/' //这个很重要
}
}
},
before: app => {
}
},
在main.js 使用配置的 api
//Axios配置
Axios.defaults.baseURL = '/api/';
.vue文件中调用接口模版
this.$axios.post(//方法
'/User/GetRemainTag',//请求地址
{SkillCategoryId: this.$route.query.idskill})//参数
.then(result => {
console.log(result);
})
.catch(err=>{
console.log(err);
});
Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。
所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用,并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件,或是想要用 webpack alias,则需要在路径前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源。
module.exports = {
baseUrl: '',
outputDir: 'dist',
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: 'static',
//默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。如果你无法使用 Vue CLI 生成的 index HTML,你可以通过将这个选项设为 false 来关闭文件名哈希。
filenameHashing: true,
pages: {
index: {
// page 的入口
entry: 'src/main.js',
// 模板来源
template: 'public/index.html',
// 在 dist/index.html 的输出
filename: 'index.html',
// 当使用 title 选项时,
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'Index Page',
// 在这个页面中包含的块,默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: ['chunk-vendors', 'chunk-common', 'index']
},
},
// eslint-loader 是否在保存的时候检查
lintOnSave: process.env.NODE_ENV !== 'production',
// 是否使用包含运行时编译器的Vue核心的构建
runtimeCompiler: undefined,
// 生产环境 sourceMap
productionSourceMap: false,
//该函数及可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
} else {
// 为开发环境修改配置...
/* var webpack = require('webpack');
var webpackConfig = require('./node_modules/@vue/cli-service/lib/config/dev.js');
var compiler = webpack(webpackConfig);
require('webpack-dev-middleware-hard-disk')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})*/
}
},
//会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: (config) => {
// 链式配置
// var webpackConfig = require('./node_modules/@vue/cli-service/lib/config/dev.js');
// //配置插件:添加
// config
// .plugin('webpack-dev-middleware-hard-disk')
// .use(require.resolve('webpack-dev-middleware-hard-disk'), {
// publicPath:webpackConfig,
// quiet: true
// });
},
// 配置高于chainWebpack中关于 css loader 的配置
css: {
sourceMap: true,
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
}
},
//所有 webpack-dev-server 的选项都支持
// https://webpack.docschina.org/configuration/dev-server/
devServer: {
open: true,
host: 'localhost',
port: 3000,
https: false,
hotOnly: true,
// proxy: {
// '/api': {
// // 目标 API 地址
// target: 'http://114.55.59.209:8080',//开发环境
// // target: 'http://192.168.6.163:8080/',//域名环境
// //如果要代理 websockets
// // ws: true,
// // 将主机标头的原点更改为目标URL
// changeOrigin: true,
// pathRewrite:{
// '^/api':'/' //这个很重要
// }
// }
// },
before: app => {
}
},
// 构建时开启多进程处理 babel 编译
parallel: require('os').cpus().length > 1,
// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// 第三方插件配置
pluginOptions: {
foo: {
// 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
}
}
};
以上是脚本宝典为你收集整理的Vue CLI3开发环境搭建全部内容,希望文章能够帮你解决Vue CLI3开发环境搭建所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。