使用vue-cli4快速搭建vue项目demo
时间:2022-07-24
本文章向大家介绍使用vue-cli4快速搭建vue项目demo,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
问题描述
使用vue-cli4
快速搭建一个可用作demo的项目。
问题分析
无
解决方案
步骤如下:
- 全局安装vue指令包:
npm install -g @vue/cli
安装之后,你就可以在命令行中访问 vue
命令。你可以通过简单运行 vue --version
,看看是否打印出当前安装的vue-cli版本号,来验证它是否安装成功。
- 使用
vue create vue-demo
创建一个新项目
这时候会进入命令行交互界面,选择第一项vueConfig
配置项即可快速搭建简单的vue项目。
- 此时通过
npm run serve
即可启动vue项目。
项目配置自动引入全局less文件
我们在入库文件main.js
引入import './assets/css/common.less'
是无效的,当组件在使用common.less下的变量的时候,会提示undefined。
vue官方文档给出的解决方案是配置vue.config.js
文件使得每个vue文件自动引入全局less文件。
步骤如下:
- 项目安装
less
和less-loader
npm i less less-loader -D
- 给你的项目添加插件
vue add style-resources-loader
运行后会在命令行让你选择需要预处理的语言:有less,sass,scss等,这里我们选择less。也就是我们之后再vue.config.js中 preProcessor
对应的值。
- 在项目src同级目录新建
vue.config.js
文件,该文件会会被@vue/cli-service
自动加载。vue.config.js 文件内容如下:
preProcessor
: 为你添加插件时选择的语言。
patterns
: 全局less文件路径。
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: ['./src/assets/css/*.less'],
}
}
};
然后就可以在各个vue文件中使用less中定义的变量了。
vue.config.js的其他配置
// const path = require('path');
// const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 (另:https://github.com/liriliri/eruda)
// const CompressionPlugin = require('compression-webpack-plugin'); //Gzip
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器
// const baseUrl = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss资源路径 不同环境切换控制
module.exports = {
//基本路径
//baseUrl: './',//vue-cli3.3以下版本使用
publicPath:'./',//vue-cli3.3+新版本使用
//输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: '',
//以多页模式构建应用程序。
pages: undefined,
//是否使用包含运行时编译器的 Vue 构建版本
runtimeCompiler: false,
//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用,仅作用于生产构建,在适当的时候开启几个子进程去并发的执行压缩
parallel: require('os').cpus().length > 1,
//生产环境是否生成 sourceMap 文件,一般情况不建议打开
productionSourceMap: false,
devServer: {
host: 'localhost',
// host: "0.0.0.0",
port: 8000, // 端口号
https: false, // https:{type:Boolean}
open: false, //配置自动启动浏览器 http://172.11.11.22:8888/rest/XX/
hotOnly: true, // 热更新
// proxy: 'http://localhost:8000' // 配置跨域处理,只有一个代理
proxy: { //配置自动启动浏览器
"/XX/*": {
target: "http://172.11.11.11:7071",
changeOrigin: true,
// ws: true,//websocket支持
secure: false
},
"/XX2/*": {
target: "http://172.12.12.12:2018",
changeOrigin: true,
//ws: true,//websocket支持
secure: false
},
}
},
// 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
// patterns: ['D:\code\vue-cli3-demo\src\assets\css\*.less',],
patterns: ['./src/assets/css/*.less'],
}
}
};
参考链接
- WebBrowser(IE) 与 JS 相互调用
- HOSTS配置问题导致集群异常故障分析
- Linux Regulator Framework(2)_regulator driver
- systemd的作用
- alsa声卡分析alsa-utils调用过程(二)-tinymixer
- alsa声卡分析alsa-utils调用过程(一)-tinyplay
- ALSA声卡驱动的DAPM(二)-建立过程
- ALSA声卡驱动的DAPM(一)-DPAM详解
- 高通Audio中ASOC的codec驱动(二)
- vue项目里的日期格式化
- CentOS下的Mysql的安装和使用
- vue路由跳转传参数
- 刘寅:TiDB 工具链和生态
- 腾讯云容器微服务API设计实践
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 最近,我用pandas处理了一把大数据……
- 【编译技术】:AST——基础的基础
- 【编译技术】:Babel——基础的基础
- 【编译技术】:解读 Babel AST Format——01
- 【编译技术】:解读 Babel AST Format——02
- PyTorch入门笔记-PyTorch初见
- ssh 连接 Linux 服务器并安装 Anaconda
- Ant Design Vue 报错:Failed to resolve directive: ant-portal的解决办法
- 小程序生成二维码海报的组件-wxa-plugin-canvas
- kbone 是什么?这可能是最好的小程序开源框架
- jQuery根据填写的input的数值导出excel表格
- 小程序根据返回值英文渲染出对应的中文
- redis灵魂拷问:聊一聊AOF日志重写
- 小程序返回的时间戳转化成时间
- JSP 报错:ReferenceError: $ is not defined