搭建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封装的命令行工具。