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
凡所有相,皆是虚妄。