Vue 配置步骤

1. 下载node：

1. 下载 node.js，（安装 nvm 管理 node）
2. 配置环境变量：右键点击我的计算机 —> 属性 —> 高级系统设置 —> 高级 —> 环境变量 —> 系统变量里面的 Path —> 在最后面新增 node 的根目录

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 工程名；(注意：工程名只能出现英文、数字和短横线)

    运行工程 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

15. 常用命令行：

node -v 查看 node 版本    
npm -v 查看 npm 版本
cd       打开文件夹
md       创建新文件夹
dir      查看文件夹内容
cd..     返回上一级文件夹
D:       切换到 D 盘 
npm root -g    查看全局安装的文件夹位置
cls    清屏

16. -s ， -d 参数

1. -S,--save 安装包信息将加入到 dependencies（生产阶段的依赖）
2. -D，--save--dev 安装包信息将加入到 devDependencies（开发阶段的依赖），所以开发阶段一般使用它

17. less

1. npm i less less-loader -S
2. {
  test: /\.less$/,
  loader: "style-loader!css-loader!less-loader",
},

less 创建

18. 服务端渲染 SSR express 与 Nuxt,js

npm install vue vue-server-renderer --save

$ npm install express --save

npm i create-nuxt-app -g
$ npx create-nuxt-app <项目名>

Vue 配置步骤

推荐阅读