创建vite VUE Router 基础项目工程​

创建Vite VUE Router 基础项目工程

指定源速度会快很多

1、首先确定安装了node.js

2、使用命令行npm create 开始创建

npm create vite@latest

或指定源

npm create vite@latest --registry=https://registry.npmmirror.com

输入"y"继续下一步

输入工程名

这里输入vuedemo1作为

选择vue

在下面这里需要注意需要选择“Cusomize with create-vue”,自定义创建，这样才能自行设置选项生成带Vue Router的Demo

如果想用模板生成带vue-route的例子，这一步不要选错

这里会出来好继续)的提示。输入y按回车继续

确定vue的版本号

这里默认是TypeScript的语法，如果不是请选择“否”则是JavaScript的语法

JSX模板 可根据实际进行选择，这里选择“否”，按回车继续下一步

出现“是否引入 Vue Router 进行单页面应用开发？ >> 否 /是” ，默认是选择”否“，按键盘方向键选择“是”，回车确认选择，继续下一步

下面的“Piniat”等可以根据实际进选择了

当看到"项目初始化完成"即代表工程的创建成功了。

打开工程所在文件夹可以看到

安装依赖包

npm install

或

npm install --registry=https://registry.npmmirror.com

3、运行测试

npm run dev

4、个性配置

.eslintrc.cjs 是一些语法检查的配置

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
 root: true,
 'extends': [
 'plugin:vue/vue3-essential',
 'eslint:recommended',
 '@vue/eslint-config-prettier/skip-formatting'
 ],
 parserOptions: {
 ecmaVersion: 'latest'
 }
}

在parserOptions 的下方可加入一些配置，根据个人的习惯,方便编写代码，可以加入一个个性化的配置

rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

 "vue/multi-word-component-names": "off",
 "vue/no-unused-components": "off",
 "no-unused-vars":"off",
 "no-mixed-spaces-and-tabs":0,
 "no-irregular-whitespace":0,

 "no-redeclare":0

}

最后变成

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
 root: true,
 'extends': [
 'plugin:vue/vue3-essential',
 'eslint:recommended',
 '@vue/eslint-config-prettier/skip-formatting'
 ],
 parserOptions: {
 ecmaVersion: 'latest'
 },
 rules: {
 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

 "vue/multi-word-component-names": "off",
 "vue/no-unused-components": "off",
 "no-unused-vars":"off",
 "no-mixed-spaces-and-tabs":0,
 "no-irregular-whitespace":0,

 "no-redeclare":0

 }
}

通过与“vue create”创建的工程比较

使用vite后，取得环境变量的语法有变化

vite(npm create vite@latest)	babel(vue create XXX)
import.meta.env.	process.env.
import.meta.env.BASE_URL	process.env.BASE_URL