4/26 Vue 3 安装

Node及NPM安装

1, Node.js 安装
包及源码下载地址为：https://nodejs.org/en/download/
对应操作系统的node安装好后，可以通过命令查看,打开cmd或者terminal控制面板：

$ node -v
v11.15.0

$ npm -v
6.7.0

2, 由于默认安装的node使用国外镜像源,npm 安装速度慢，为了加速可以使用淘宝镜像，最好安装的node版本大于12

$ npm install cnpm -g

3, 安装vue

$ cnpm install vue@next

Vue命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli。

$ vue --version
@vue/cli 5.0.4

# vue 升级命令
$ vue upgrade --next

创建Vue项目

# 进入目录后初始化vue-cli插件
$ cnpm i -g @vue/cli-init

# 初始化项目
$ vue init webpack mytest

# 初始化完成后进入项目目录启动
$ cd mytest
$ cnpm run dev
...  Your application is running here: http://localhost:8080

Yarn的使用

Yarn是Facebook发布的一款依赖包安装工具。相对于npm，命令更简洁，安装速度更快，使用更舒服，因此日常开发中推荐使用yarn代替npm来作为插件安装管理工具。（cnpm跟npm命令一样，只是更换了镜像源，实际上也没有yarn更好。）

1, Yarn的安装：https://blog.csdn.net/LizequaNNN/article/details/122960124

# 命令安装
$ cnpm install yarn -g

# 查看版本
$ yarn --version

# 配置源
$ yarn config set registry https://registry.npm.taobao.org -g
$ yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

2, Yarn常用命令介绍

# 初始化项目
$ yarn add init

# 安装vue
$ yarn add vue

# 安装webpack，webpack-dev-server（是一个小型的Node.js Express服务器）
$ yarn add webpack webpack-dev-server

# 安装babel，babel的作用是将es6的语法编译成浏览器认识的语法es5
$ yarn add babel babel-core babel-loader babel-preset-es2015

# 用来解析vue的组件，.vue后缀的文件
$ yarn add vue-loader vue-template-compiler

# 用来解析css
$ yarn add css-loader style-loader

# 拓展：css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

# 用于打包文件和图片
$ yarn add url-loader file-loader

# 用于编译sass
$ yarn add sass-loader node-sass

# 安装路由
$ yarn add vue-router

# yarn自己升级yarn
$ yarn upgrade global yarn

# yarn的所有命令
$ yarn -h

- yarn的版本号
$ yarn-V或者yarn --version