搭建vue项目
安装环境
下载安装NodeJS
## 下载NodeJS地址
http://nodejs.cn/download/
## 安装后查看NodeJS版本
C:\Users\sunpy>node -v
v12.22.12
C:\Users\sunpy>npm -v
6.14.16
安装cnpm
npm install -g cnpm@6.0.0 --registry=https://registry.npm.taobao.org
## 安装后查看cnpm版本
C:\Users\sunpy>cnpm -v
cnpm@6.0.0 (C:\Users\sunpy\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.18 (C:\Users\sunpy\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@12.22.12 (F:\tools\nodejs\node.exe)
npminstall@3.28.1 (C:\Users\sunpy\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\sunpy\AppData\Roaming\npm
win32 x64 10.0.19045
registry=https://registry.npm.taobao.org
安装vue-cli或者@vue/cli脚手架
## 安装vue2的脚手架
npm install --global vue-cli
## 安装vue3的脚手架
cnpm install -g @vue/cli
## 桥接工具,依然可以使用vue2的旧功能
cnpm install -g @vue/cli-init
查看安装vue脚手架后的版本:
F:\workspace\project>vue -V
@vue/cli 5.0.8
创建vue2.x项目
使用vue2方式webpack初始化项目
vue init webpack auth-vue
使用vue3方式创建项目
vue create auth-vue
安装axios
npm install -g axios
安装vuex
npm install -g vuex
安装less
npm install less less-loader --save-dev
安装sass
cnpm install node-sass@1.26.8 --save
cnpm install sass-loader@8.0.2 --save
启动项目
npm run dev
使用npm查看当前源、切换淘宝镜像、切换官方源
npm查看当前源
C:\Users\sunpy>npm get registry
https://registry.npmjs.org/
npm设置淘宝镜像源
C:\Users\sunpy>npm config set registry=http://registry.npm.taobao.org
C:\Users\sunpy>npm get registry
http://registry.npm.taobao.org/
vue、vue-cli、webpack的区别
vue是一套框架,用于构建用户界面的渐进式框架。
webpack是一种打包工具。
vue-cli是一个基于 Vue.js进行快速开发的完整系统,vue-cli基于nodejs+webpack封装的命令行工具。