vue学习
Vue-cli脚手架的学习
1、安装 nodeJS的环境
下载地址:https://nodejs.org/zh-cn/download/
检查相关node 和 npm的环境,运行cmd
命令窗口
1 | C:\Users\uoso>node -v |
如果输入以上命令时能出现相应的版本号,证明环境可用
2、配置国内的NPM插件库
1 | C:\Users\uoso>npm install cnpm -g |
3、安装Vue-cli脚手架库
1 | C:\Users\uoso>npm install vue-cli -g |
4、创建一个vue 项目
进入想要创建的文件夹目录,如:
1
2
3
4
5C:\Users\uoso>F:
F:\>cd F:\UoSo-Project
F:\UoSo-Project>创建项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30F:\UoSo-Project>vue init webpack uoso-vue-demo
# 设置项目名称
? Project name uoso-vue-demo
# 设置项目的描述
? Project description A Vue.js project
# 设置项目作者信息
? Author zxj <1845124851@qq.com>
# 设置vue的构建模式
? Vue build standalone
# 是否安装vue 路由
? Install vue-router? No
# 是否使用ESLint
? Use ESLint to lint your code? No
# 是否使用测试
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no
# 基本上都是选择no 项目创建成功信息
# Project initialization finished!
# ========================
To get started:
cd uoso-vue-demo
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack进入项目
1
F:\UoSo-Project>cd uoso-vue-demo
安装相关依赖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22F:\UoSo-Project\uoso-vue-demo>npm install
# 配置阿里淘宝的镜像
npm install --registry=https://registry.npm.taobao.org
# 卸载
# 全局安装卸载工具
npm install rimraf -g
rimraf node_modules
# 查看安装的全局包
npm list -g --depth 0
+-- bower@1.8.8
+-- cnpm@6.1.1
+-- docsify-cli@4.4.1
+-- hexo@5.2.0
+-- node-pre-gyp@0.15.0
+-- rimraf@3.0.2
+-- webpack@5.0.0
+-- webpack-cli@4.0.0
`-- yarn@1.22.10启动当前项目
1
F:\UoSo-Project\uoso-vue-demo>npm run dev
使用 http://127.0.0.1:8080/ 访问启动的项目
5、安装Vue的router相关库
1 | F:\UoSo-Project\uoso-vue-demo>npm install vue-router --save-dev |
6、安装 element ui
1 | F:\UoSo-Project\uoso-vue-demo>npm i element-ui -S |
7、安装SASS加载器
1 | npm install sass-loader node-sass --save-dev --registry=https://registry.npm.taobao.org |