码迷,mamicode.com
首页 > 其他好文 > 详细

Vue 配置步骤

时间:2020-07-12 18:44:59      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:conf   com   outer   输入   https   不能   工具   配置步骤   patch   

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

 

 

Vue 配置步骤

标签:conf   com   outer   输入   https   不能   工具   配置步骤   patch   

原文地址:https://www.cnblogs.com/cntian/p/13289140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!