vue 使用cli脚手架手动创建项目 相关的选择配置及真正项目的开始

转载https://www.jianshu.com/p/635bd3ab7383

根据上述连接将基本的环境和命令和装好

使用命令行 vue create 项目名称 出现选项 选择手动(没有截图展示) 然后出现选择安装东西
可以选择进行自动安装和手动安装 我用的自动安装有的东西没有装上所以进手动安装
下面是步骤
注意 上下箭头切换 空格 选中或者取消 下面解释下
1.create vue 项目名称

在这里插入图片描述


安装选择配置


其余具体含义看下图

在这里插入图片描述


下一步

在这里插入图片描述


再下一步

在这里插入图片描述


ESLint 严格开发 在使用的是时候一般不要关闭 虽然有的时候报错 但是也确实是自己写的不规范导致的
必要的时候可以进行注释操作标注不报错

在这里插入图片描述


保存数据

在这里插入图片描述


后边的根据自己要求自己回车就行

相关文件的说明

在这里插入图片描述


vue.config.js配置

const webpack = require('webpack') module.exports = { //部署应用包时的基本 URL publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './', //当运行 vue-cli-service build 时生成的生产环境构建文件的目录 outputDir: 'dist', //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 assetsDir: 'assets', // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效 lintOnSave: true, //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template runtimeCompiler: true, // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾 productionSourceMap: true, configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... } else { // 为开发环境修改配置... } }, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. modules: false }, // webpack-dev-server 相关配置 devServer: { // 设置代理 hot: true, //热加载 host: '0.0.0.0', //ip地址 port: 8085, //端口 https: false, //false关闭https,true为开启 open: true, //自动打开浏览器 proxy: { '/api': { //本地 target: 'xxx', // 如果要代理 websockets ws: true, changeOrigin: true }, '/test': { //测试 target: 'xxx' }, '/pre': { //预发布 target: 'xxx' }, '/pro': { //正式 target: 'xxx' } } }, pluginOptions: { // 第三方插件配置 // ... } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zygdjw.html