Vue 3 - 02 vue 安装

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


凡所有相,皆是虚妄。

推荐阅读