Vue 配置步骤

Posted 2020-12-17 cntian

1. 下载node：

查看版本(node -v、npm -v) 
常用指令：cd 文件路径 ：更改文件路径；  cls：清屏    

2. 使用下面的命令更改 npm 的源地址为淘宝源：

npm config set registry http://registry.npm.taobao.org/

3. 更改好了之后，查看源地址是否正确的被更改：

npm config get registry

4. 使用下面的命令安装 vue-cli 工具：

npm install -g @vue/cli

5. 安装好之后，检查 vue-cli 是否安装成功：

vue --version

6. 选择一个目录，该目录将放置你的工程文件夹；在终端中进入该目录

在 powershell 或者 cmd 输入 cd 目录

7. 使用 vue-cli 提供的命令搭建工程：

vue create 工程名；(注意：工程名只能出现英文、数字和短横线)

8. 

    运行工程 npm run serve  或  npm run dev
    打包工程 npm run build
    缺少第三方文件依赖  npm i

9. 使用 vue-router 可以非常轻松的构建单页应用程序：

安装：npm i vue-router  ；官网地址： https://router.vuejs.org/zh/

10 . 使用 vuex  管理数据：

## 安装 vuex

* 在页面中引入 vuex 库
* 该库提供了一个构造函数 Vuex. Store ， 通过该构造函数，即可创建一个数据仓库

var store = new Vuex. Store({

    <!-- 仓库数据配置 -->

})
Vue.use(Vuex); 
new Vue({

    <!-- 其他配置 -->
    store

})



# vuex 的核心概念

1. 数据的改动
    - 必须要提交 commit 一个 mutation
    - 在 vuex 中，提交 mutation 是数据变化的唯一原因
    - 在 mutation 中不能出现副作用处理
2. 什么是副作用操作：
    - 改动或使用外部的数据
    - ajax
    - 其他异步行为
3. 处理副作用：
    - 触发 dispatch 一个 action

## store 变化逻辑

1. 直接通过 mutation 改动仓库数据
2. 通过 actions 改动仓库数据

vuex 实例与核心概念

11. 安装 vue devtools：

这是一个 chrome 浏览器插件，用于调试 vue、vue-router、vuex 应用  ——> （下载谷歌访问助手破解版，然后通过chrome应用商店下载）

12. ElementUi 或 ant design

13. 请求方式：axios

Using npm:      $ npm install axios
Using cdn:      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

14. 请求方式：vue-source

npm install vue-source --save