vue cli快速搭建网站步骤及参数详解
以TP6+vue3+vue cli4.5.6+element UI为例,vue的web工程放在/public下一、准备①已安装node.js(vue cli4.x,node是v10以上版本),npm②没有旧版vue cli,如有,卸载npm uninstall vue-cli -g //或者 yarn global remove vue-cli二、搭建工程1、创建项目vue creat 项目工程名
以TP6+vue3+vue cli4.5.6+element UI为例,vue的web工程放在/public下
一、准备
①已安装node.js(vue cli4.x,node是v10以上版本),npm
②没有旧版vue cli,如有,卸载
npm uninstall vue-cli -g //或者 yarn global remove vue-cli
二、搭建工程
1、创建项目
vue create 项目工程名称
1、之前设置默认的vue2配置
2、之前设置默认的vue3配置
3、自定义
按需选择:(空格选中 回车进入下一步)
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version ##选择vue版本
(*) Babel ##转码器,将ES6代码转为ES5代码,从而在现有环境执行。
( ) TypeScript ##TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行
(*) Progressive Web App (PWA) Support ##Web应用程序支持
(*) Router ##vue路由管理
(*) Vuex ##vue的状态管理
(*) CSS Pre-processors ##css预处理器(如:less、sass)
(*) Linter / Formatter ##代码风格检查和格式化(如:ESlint)
( ) Unit Testing ##单元测试
( ) E2E Testing #end to end 测试
Vue CLI v4.5.6
┌─────────────────────────────────────────┐
│ │
│ New version available 4.5.6 → 5.0.3 │
│ Run npm i -g @vue/cli to update! │
│ │
└─────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, PWA, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
2.x
> 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n ##用之前的router模式
选择一款css预处理器
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
> Less
Stylus
选择一个格式化配置,看个人习惯,如果多个空格都要你格式化下才不报错,那选严格模式,这个用的也比较多
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only ##只进行报错提醒
ESLint + Airbnb config ##不严谨模式
ESLint + Standard config ##标准模式
ESLint + Prettier ##严格模式
代码检测方式
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save ##保存时检测
( ) Lint and fix on commit ##提交是检测
依赖放置的目录文件:
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files ##依赖专用的配置的文件
In package.json ##根目录的package.json包
是否预设为将来的项目中,在vue creat 项目 这一步能看到,基本是不同项目不同设置,选择N
? Save this as a preset for future projects? (y/N)
Installing CLI plugins. This might take a while… 安装cli插件,需要花些时间
等待ing…
安装成功,cd web-uniapp 运行 npm run serve,
DOC命令 等同hbuilder X中,
新建vue.config.js,并配置
module.exports = {
publicPath: "./",
// 部署生产环境和开发环境下的URL:可对当前环境进行区分,baseUrl 从 Vue CLI 3.3 起已弃用,要使用publicPath
// baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'
// publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
// 输出文件目录:在npm run build时,生成文件的目录名称
outputDir: 'dist',
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
// assetsDir: "static",
assetsDir: '', //放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
indexPath: 'index.html', //指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
// 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度
productionSourceMap: false,
// 默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存,你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)
filenameHashing: false,
// 代码保存时进行eslint检测
lintOnSave: true,
// webpack-dev-server 相关配置
devServer: {
// 自动打开浏览器
open: true,
host: '0.0.0.0',
// public:'192.168.1.10:8080',
// 端口
port: 8080,
// https
https: false,
// 热更新
hotOnly: false,
// 使用代理
proxy: {
'/api': {
// 目标代理服务器地址
target: 'http://www.yourwebsite.com,
// 开启代理,本地创建一个虚拟服务器 允许跨域
changeOrigin: true,
},
},
},
}
打包
查看下 工程名/package.json的命令 是npm run build
安装element-plus
npm install element-plus --save
配置main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from 'element-plus' // 引入element-plus
import 'element-plus/theme-chalk/index.css' // 引入element-plus的样式
createApp(App)
.use(store)
.use(router)
.use(ElementPlus, { zIndex: 3000, size: 'small' }) // 使用element-plus
.mount("#app");
运行如下图:发现图标没显示
这里有坑,就是官方的同一份文档出的buttons案例用的是 ts的icon ,icon的图标单独装。安装图标:
npm install @element-plus/icons-vue
修改main.js
再运行如下效果:
更多推荐
所有评论(0)