技术栈
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
-
nvm list available [列出可用版本]
-
nvm list [列出本地已安装版本]
-
nvm install 21.0.0 [安装指定版本的nodejs]
-
nvm install latest [安装最新版本的nodejs]
-
nvm use 22.2.0 [切换生效指定版本]
4.打开cmd,检查nodejs版本:
-
node -v
-
npm -v
5.全局安装vue-cli脚手架 [旧版,新版是create-vue]
npm install --global vue-cli
6.初始化一个vue项目"helloworld":
-
mkdir repos
-
cd repos
-
vue init webpack helloworld
-
...回答一堆问题
-
cd ./helloworld/
-
dir
项目结构:
/build/
/config/
/node_modules/
/src/
/static/
/index.html
/package.json
/package-lock.json
/src/router/
/src/app.vue
/src/main.js
7.启动项目实时预览
-
npm run dev
-
看到安装完成提示 + 预览地址 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/