1. 安装，直接设置环境变量到nodejs的根目录
|
1 2 3 4 5 6 7 8 9 |
node --version 在node.js安装路径下创建node_global和node_cache文件夹，创建之后运行下面两个命令 npm config set prefix "D:\Dev\Tools\nodejs\node_global" npm config set cache "D:\Dev\Tools\nodejs\node_cache" 设定： NODE_PATH = D:\Dev\Tools\nodejs\node_global\node_modules npm install express -g cnpm install webpack -g cnpm install webpack-cli -g webpack -v |
2. 安装cnpm ， 执行： npm install -g cnpm -registry=https://registry.npm.taobao.org
|
1 |
cnpm -v |
3. 安装vue
|
1 2 3 4 5 6 |
cnpm install vue@next cnpm install -g @vue/cli vue --version vue upgrade --next npm init vue@latest cnpm install element-plus --save |
4. webstorm创建vue3项目 https://www.csdn.net/tags/NtTacg4sMTgzODEtYmxvZwO0O0OO0O0O.html
图文并茂——从零开始使用Webstorm创建vue.js项目 https://blog.csdn.net/m0_37872413/article/details/115743213
增加依赖： https://segmentfault.com/q/1010000040686072
修改package.json下面的dependencies节点： “element-plus”: “^2.2.16”
|
1 2 3 4 5 6 7 8 9 |
"dependencies": { "axios": "^0.21.1", "core-js": "^3.6.5", "element-plus": "^2.2.16", "normalize.css": "^8.0.1", "vue": "^3.0.0", "vue-router": "^4.0.10", "vuex": "^4.0.2" }, |
webstorm提示安装，确定就好。
引入：
|
1 2 3 4 5 6 7 8 |
import {createApp} from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') |
5. 解决vue3中用debugger报错 https://blog.csdn.net/qq_33323381/article/details/122215242
6. Vue3使用el-tabs切换不同component https://www.shuanghei.com/article/2021/12/61a9d1056a1a935affdc1de1.html
7. 动态组件 https://cn.vuejs.org/guide/essentials/component-basics.html#dynamic-components
8. Vue-动态组件&异步导入 https://juejin.cn/post/6976422752416694302
Vue项目 动态引入组件 https://www.jianshu.com/p/9a3dbc1d3d8c
vue3 动态异步引入组件 https://www.cnblogs.com/sunnybob/p/16547745.html
VUE3+vite项目中动态引入组件和异步组件 https://blog.csdn.net/qq_32594913/article/details/126039629
设定Title
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
npm install vue-wechat-title --save ... "vuex": "^4.0.2" ... import VuewechatTitle from 'vue-wechat-title' ... .use(VuewechatTitle) ... <div v-wechat-title="AppTitle"></div> ... data(){ return { AppTitle:"这是我的自定义标题" } } |
9. 安装插件： Pinia
|
1 2 3 4 5 6 7 |
//到工程的根目录 cd D:\Dev\workspace\WebstormProjects\psi npm install pinia ...... import { createPinia } from 'pinia' ...... .use(createPinia()) |
10. ‘computed’ is not defined no-undef 错误 ， 要引入 import { computed } from "vue";
11. 全局状态管理工具: 关于 Pinia https://vue3.chengpeiquan.com/pinia.html#%E4%BD%BF%E7%94%A8-computed-api
12. element-plus图标
|
1 2 3 4 5 6 7 8 9 10 |
npm install @element-plus/icons-vue ...... "@element-plus/icons-vue": "^2.0.9", ...... import * as ElementPlusIconsVue from '@element-plus/icons-vue' ...... for (const [key, component] of Object.entries(ElementPlusIconsVue)) { console.log("key="+key) app.component(key, component) } |
