2

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

 1 year ago
source link: https://blog.51cto.com/u_10955363/5707340
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

精选 原创

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 [email protected] -g

4-2-Vite3创建项目

npm create vite@latest   回车

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

选择  Vue  回车

选择 TypeSc'ript  回车

等待创建项目完成

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​​

            

        
        
        
    

    

        
  • 
                
                    
                    赞
                
            
    • 
            
  • 
                
                    
                    收藏
                
            
    • 
            
  • 
                
                    
                    评论
                
            
    • 
            
  • 
                
                    
                    分享
                
            
    • 
                            
  • 
                    
                        
                        举报
                    
                
    • 
                    

    
    


        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK