vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。
安装的顺序如下 Node.js
=>webpack
=>vue-cli
具体的作用
下载安装就行了下载网址
或者
用brew安装 先安装brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
替换及重置Homebrew默认源
//替换brew.git:
cd "$(brew --repo)"
git remote set-url origin https://mirrors.ustc.edu.cn/brew.git
//替换homebrew-core.git:
cd "$(brew --repo)/Library/Taps/homebrew/homebrew-core"
git remote set-url origin https://mirrors.ustc.edu.cn/homebrew-core.git
安装Node.js
brew install nodejs
macOS 10.14 报错 chown: /usr/local: Operation not permitted解决方法 卸载重新安装
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
重新安装
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
查看node版本
node -v
安装后就可以用npm命令了
cnpm就是npm的国内淘宝镜像 所有npm的命令 直接换成cnpm就行了
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
也可以直接指定node.js的镜像地址 就不用使用cnpm也能使用淘宝镜像
//设置镜像地址
npm config set registry https://registry.npm.taobao.org
//验证是否设置成功
npm config get registry
查看已安装的包
npm list --depth 0
--depth 0
是只显示第一层级的包 如果是1的话就会显示两个层级webpack 4.X 开始,需要安装 webpack-cli 依赖
sudo cnpm install -g webpack webpack-cli
查看安装状态
webpack -v
安装
sudo cnpm install --global vue-cli
验证是否成功 查看版本
vue -V
进入要新建项目的目录
输入以下命令
vue init webpack demo001
输入命令后,会跳出几个选项让你回答:
进入项目目录
cd demo001
运行
npm run dev
运行后自动打开浏览器
config=>index.js
autoOpenBrowser: true,
打包生成项目
npm run build
新项目添加依赖
npm install
Git忽略文件.gitignore
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
cnpm install axios
vue-cli
创建的项目本身已经配置了babel
,无需额外配置 不同再看下面的
可以将ES6代码转化为ES5代码,从而在现有环境执行,这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持
为什么不安装在全局
如果安装在全局,那意味着项目要运行,全局环境必须有bable,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的babel。
安装步骤
进入项目根目录
安装
cnpm install babel-cli --save-dev
设置转码规则
cnpm install babel-preset-es2015 --save-dev
创建配置文件 基本格式是这样的
{
"presets":[],
"plugins":[]
}
添加es2015如下
{
"presets":["es2015"]
}
Babel 默认只转换新的 JavaScript 句法,而不转换新的 API,
比如 Iterator
、Generator
、Set
、Map
、Proxy
、Reflect
、Symbol
、Promise
等全局对象,以及一些定义在全局对象上的方法(比如 Object.assign
)都不会转码。
Babel 默认不转码的 API 非常多,详细清单可以查看 definitions.js 文件。
axios 是基于 Promise 来实现的,IE 和低版本的设备不支持 Promise
。
npm install es6-promise -S
// 在 main.js 首行引入即可
require("es6-promise").polyfill()
这样,就已经可以解决你的问题了。
因为我的项目中是有对 axios
进行封装的,而且我也不喜欢在 main.js
中来做这个操作,所以我将这个操作移到了 api.js
这个文件的开头。(api.js
的用途是用来对 axios 进行封装),所以我的是下面这样。
// api.js
require("es6-promise").polyfill()
import axios from 'axios'
当然,你也可以使用 import 的方式:
// request.js
import 'es6-promise/auto'
import axios from 'axios'
ok,现在问题解决了【IE和低版本的安卓设备都没问题了】
npm install babel-polyfill -S
// 在 main.js 首行引入即可
import "babel-polyfill"
因为我的项目中是有对 axios
进行封装的,而且我也不喜欢在 main.js
中来做这个操作,所以我将这个操作移到了 api.js
这个文件的开头。(api.js
的用途是用来对 axios
进行封装),所以我的是下面这样:
// api.js
import 'babel-polyfill'
import axios from 'axios'
或者 build
=>webpack.base.config.js
中修改entry
属性
module.exports = {
entry: ["babel-polyfill", "./src/main.js"],
};
安装
npm install vuex --save
使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Vuex 依赖 Promise。如果你支持的浏览器并没有实现 Promise (比如 IE),那么你可以使用一个 polyfill 的库,例如 es6-promise。
npm install vuex --save
npm install es6-promise --save
使用
import 'es6-promise/auto'
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
常用的解决方案有三种:
而应用到的技术也是有很多,大体上我总结了四个,也是比较常用的:
参考网站
参考网站
参考网站
参考网站
而市场上依靠vue做出来的唱功案例还是很多的:
那么他们是如何做优化的呢?我们通过分析,总结以下几点