VUE3.2前端开发系列一（环境搭建）

Posted 2022-09-24

1-nodejs安装

下载地址：

​​https://nodejs.org/dist/v16.17.0/node-v16.17.0-x64.msi​​

安装路径建议 D:/nodejs/

2-VSCode安装

下载地址：

​​https://az764295.vo.msecnd.net/stable/74b1f979648cc44d385a2286793c226e611f59e7/VSCodeUserSetup-x64-1.71.2.exe​​

安装路径建议 D:/vscode/

安装完后重启电脑，自动加入环境变量path

扩展安装

汉化插件：Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

vue3插件：Vue Language Features (Volar)

vue2插件：Vetur 禁用

3-npm设置

设置全局的安装包目录：

npm config set prefix "D:\\nodejs\\node_global"

npm config set cache "D:\\nodejs\\node_cache"

3-1-设置淘宝镜像

npm config set registry https://registry.npm.taobao.org --global

npm config set disturl https://npm.taobao.org/dist --global

4-安装vit3及创建Vite+Vue+Element-plus项目

4-1-全局安装vite3（ -g 表示全局安装 ）

npm install create-vite@3.0.0 -g

4-2-Vite3创建项目

npm create vite@latest   回车

? Project name: » vite-project    输入项目文件夹名称  例：my-vite-app   回车

选择  Vue  回车

选择 TypeScript  回车

等待创建项目完成

4-3-依次输入命令

cd my-viye-app   //进入项目文件夹

npm install  //安装依赖包

npm run dev  //启动项目

快捷键 Ctrl+c  停止项目

4-4-安装Element-plus+可视化表单Vfrom3

npm install element-plus --save     //-S等同于--save：同时写入package.json文件

npm install @element-plus/icons-vue   //安装element-plus icon图标

注意：VForm依赖Element UI，需要先安装Element-plus

npm install vform-builds   //安装可视化表单Vfrom3

4-5-完整引入Element-plus

引入前SRC下main.js文件内容

//main.s文件
import  createApp  from vue
import ./style.css
import App from ./App.vue

createApp(App).mount(#app)

完整引入element-plus+隐藏类-icon图标+可视化表单Vfrom3

//main.s文件
import  createApp  from vue
import App from ./App.vue

import ElementPlus from element-plus  //引入element-plus
import element-plus/dist/index.css  //引入element-plus样式
import element-plus/theme-chalk/display.css  //引入栅格布局自动隐藏类
import * as ElementPlusIconsVue from @element-plus/icons-vue  //引入element-plus图标库

import VForm from vform-builds  //引入VForm库
import vform-builds/dist/VFormDesigner.css  //引入VForm样式
import VFormRender from vform-builds/dist/VFormRender.umd.min.js  //引入VFormRender组件
import vform-builds/dist/VFormRender.css  //引入VFormRender样式

const app = createApp(App)   //改写createApp(App).mount(#app)方式

//全局注册element-plus图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) 
    app.component(key, component)


app.use(ElementPlus)   //全局注册ElementPlus
Vue.use(VForm)  //全局注册VForm
Vue.use(VFormRender)  //全局注册VFormRender等组件
app.mount(#app)

在tsconfig.json文件增加Volar支持（vue3语法插件）

// tsconfig.json文件

  "compilerOptions": 
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    //增加Volar支持（vue3语法插件）
    "types": [
      "element-plus/global"
    ]
  ,
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [ "path": "./tsconfig.node.json" ]

4-6-按需导入Element-plus

注：需要可视化表单Vfrom3，则不要按需引入element-plus

安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

把下列代码插入到 Vite配置文件中

//vite.config.ts文件
import  defineConfig  from vite
import vue from @vitejs/plugin-vue
// 自动导入ElementPlus
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import  ElementPlusResolver  from unplugin-vue-components/resolvers

export default defineConfig(
  plugins: [
    vue(),
    // 自动导入ElementPlus
    AutoImport(
      resolvers: [ElementPlusResolver()],
    ),
    // 自动导入ElementPlus
    Components(
      resolvers: [ElementPlusResolver()],
    ),
  ],
  //host 0.0.0.0 表示所有主机都可访问
  server: 
    host: "0.0.0.0"
  
)

按需导入element-plus  main.ts文件

//main.ts文件
import  createApp  from vue
import App from ./App.vue

import element-plus/theme-chalk/display.css  //引入栅格布局自动隐藏类
import * as ElementPlusIconsVue from @element-plus/icons-vue  //引入element-plus图标库

const app = createApp(App)   //改写createApp(App).mount(#app)方式

//全局注册element-plus图标库
for (const [key, component] of Object.entries(ElementPlusIconsVue)) 
    app.component(key, component)


app.mount(#app)

5-资料扩展

Element-plus 官方网站

​​https://element-plus.gitee.io/zh-CN/guide/design.html​​

可视化表单Vfrom3 官方网站

​​https://vform666.com/vform3.html​​