【怀旧版】win10中从零开始创建vue2+ElementUI项目

技术栈

node22 + vue2 + cli2.9 + webpack3.6 + elementUI2

必读:

https://u.rudon.cn/wgz5 > Vue简史
https://u.rudon.cn/bvg0 > 使用 nvm 管理不同版本的 node 与 npm
https://u.rudon.cn/ehn3 > nodejs和vue关系
https://u.rudon.cn/qyb4 > vue的vite、vue-cli、create-vue的区别
https://u.rudon.cn/y0u7 > Element-UI和Element-Plus的区别
https://u.rudon.cn/6988 > 初学vue3+Elementui 项目实战

手册:

1.vue2 > https://v2.cn.vuejs.org/

2.vue3 > https://cn.vuejs.org/

3.ElementUI > https://element.eleme.io/

4.Element Plus > https://element-plus.org/

5.脚手架vueCLI > https://cli.vuejs.org/zh/

步骤:

0.打开cmd,运行nvm -v检查是否已经安装nvm

1.安装nvm,仓库:https://u.rudon.cn/9twy

2.配置nvm,修改:nvm安装目录/settings.txt,内容如下:

bash 复制代码
root: C:\env\nvm
path: C:\env\nodejs
node_mirror: http://npmmirror.com/mirrors/node/ 
npm_mirror: http://npmmirror.com/mirrors/npm/

3.使用nvm安装nodejs,详询:https://u.rudon.cn/rfwb

  1. nvm list available [列出可用版本]

  2. nvm list [列出本地已安装版本]

  3. nvm install 21.0.0 [安装指定版本的nodejs]

  4. nvm install latest [安装最新版本的nodejs]

  5. nvm use 22.2.0 [切换生效指定版本]

4.打开cmd,检查nodejs版本:

  1. node -v

  2. npm -v

5.全局安装vue-cli脚手架 [旧版,新版是create-vue]
npm install --global vue-cli

6.初始化一个vue项目"helloworld":

  1. mkdir repos

  2. cd repos

  3. vue init webpack helloworld

  4. ...回答一堆问题

  5. cd ./helloworld/

  6. dir

项目结构:

/build/

/config/

/node_modules/

/src/

/static/

/index.html

/package.json

/package-lock.json

/src/router/

/src/app.vue

/src/main.js

7.启动项目实时预览

  1. npm run dev

  2. 看到安装完成提示 + 预览地址 Your application is running here: http://localhost:8080

8.浏览器中打开这个链接,编辑+实时预览

9.安装 elementUI

npm i element-ui -S

10.开发,参照ElementUI手册
https://element.eleme.io/

11.打包

npm run build

12.打包结果

./dist/index.html + 其他文件

13.发布到运营环境: 复制上面的index.html等到Web根目录即可

推荐 无广告的百度首页!
https://baidu.rudon.cn/

相关推荐
柯南二号32 分钟前
HarmonyOS ArkTS 下拉列表组件
前端·javascript·数据库·harmonyos·arkts
wyy729334 分钟前
v-html 富文本中图片使用element-ui image-viewer组件实现预览,并且阻止滚动条
前端·ui·html
前端郭德纲1 小时前
ES6的Iterator 和 for...of 循环
前端·ecmascript·es6
王解1 小时前
【模块化大作战】Webpack如何搞定CommonJS与ES6混战(3)
前端·webpack·es6
欲游山河十万里1 小时前
(02)ES6教程——Map、Set、Reflect、Proxy、字符串、数值、对象、数组、函数
前端·ecmascript·es6
明辉光焱1 小时前
【ES6】ES6中,如何实现桥接模式?
前端·javascript·es6·桥接模式
PyAIGCMaster1 小时前
python环境中,敏感数据的存储与读取问题解决方案
服务器·前端·python
baozhengw1 小时前
UniAPP快速入门教程(一)
前端·uni-app
nameofworld1 小时前
前端面试笔试(二)
前端·javascript·面试·学习方法·数组去重
帅比九日2 小时前
【HarmonyOS NEXT】实战——登录页面
前端·学习·华为·harmonyos