搭建vue的开发环境

Posted 2021-11-28 liupengfei13346950447

搭建vue的开发环境：

https://cn.vuejs.org/v2/guide/installation.html（官网地址）

1、必须要安装nodejs

2、搭建vue的开发环境 ，安装vue的脚手架工具   官方命令行工具

npm install --global vue-cli  /   cnpm install --global vue-cli          （此命令只需要执行一次）

3、创建项目   必须cd到对应的一个项目里面

vue init webpack vue-demo01 （创建项目文件夹）

cd  vue-demo01 （到项目目录下）

cnpm install   /  npm install          如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install

npm run dev

4、另一种创建项目的方式  （simple是简洁的） （推荐）  ***

vue init webpack-simple vuedemo02

cd  vuedemo02

cnpm install   /  npm install （安装依赖） 

npm run dev    （运行项目）

cnpm  下载包的速度更快一些。

地址：http://npm.taobao.org/ （淘宝镜像）

安装cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue路由配置：

https://router.vuejs.org/ （官网）

1.安装

npm install vue-router  --save   / cnpm install vue-router  --save

2、引入并 Vue.use(VueRouter)   (main.js)

import VueRouter from ‘vue-router‘

Vue.use(VueRouter)

3、配置路由

1、创建组件 引入组件

2、定义路由  （建议复制s）

const routes = [

  { path: ‘/foo‘, component: Foo },

  { path: ‘/bar‘, component: Bar },

  { path: ‘*‘, redirect: ‘/home‘ }   /*默认跳转路由*/

]

3、实例化VueRouter

const router = new VueRouter({

  routes // （缩写）相当于 routes: routes

})

4、挂载

new Vue({

  el: ‘#app‘,

  router，

  render: h => h(App)

})

5 、根组件的模板里面放上这句话  

 <router-view></router-view>     

6、路由跳转

<router-link to="/foo">Go to Foo</router-link>

 <router-link to="/bar">Go to Bar</router-link>

接口（测试）

新闻列表接口：

http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1 

新闻详情接口：

 http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=488 

 

 

基于Vue的Ui框架

饿了么公司基于vue开的的vue的Ui组件库

Element Ui    基于vue  pc端的UI框架  http://element.eleme.io/ 

MintUi    基于vue 移动端的ui框架  http://mint-ui.github.io/#!/en 

mintUI的使用：

1.找官网

2.安装   

npm install mint-ui -S         -S表示  --save

3.引入mint Ui的css 和 插件

import Mint from ‘mint-ui‘;

Vue.use(Mint);

import ‘mint-ui/lib/style.css‘

4.看文档直接使用。

在mintUi组件上面执行事件的写法

@click.native

<mt-button @click.native="sheetVisible = true" size="large">点击上拉 action sheet</mt-button>

element UI的使用：

1.找官网  http://element.eleme.io/#/zh-CN/component/quickstart 

2.安装  

cnpm i element-ui -S         -S表示  --save

3.引入element UI的css 和 插件

import ElementUI from ‘element-ui‘;

import ‘element-ui/lib/theme-chalk/index.css‘;

Vue.use(ElementUI);

4、

*webpack.config.js  配置file_loader      http://element.eleme.io/1.4/#/zh-CN/component/quickstart 

  {

test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

loader: ‘file-loader‘

          }

5.看文档直接使用。

element UI组件的单独使用（第一种方法）：

1、    

cnpm install babel-plugin-component -D

2、找到.babelrc 配置文件

把

{

  "presets": [

    ["env", { "modules": false }],

    "stage-3"

  ]

}

改为  注意：

{

  "presets": [["env", { "modules": false }]],

  "plugins": [

    [

      "component",

      {

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

3、

import { Button, Select } from ‘element-ui‘;

Vue.use(Button)

Vue.use(Select)

element UI组件的单独使用（第二种方法）：

import { Button, Select } from ‘element-ui‘;

Vue.use(Button)

Vue.use(Select)

引入对应的css

import ‘element-ui/lib/theme-chalk/index.css‘;

如果报错： webpack.config.js  配置file_loader

 

 {

test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,

loader: ‘file-loader‘

          }

Vuex

Vuex 是一个专为 Vue.js 设计的状态管理模式

vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件共享状态时，会需要：

多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。这需要你去学习下，vue编码中多个组件之间的通讯的做法。

来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱，通常会导致无法维护的代码。来自官网的一句话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的，而现在有了vuex，就组件就都和store通讯了。问题就自然解决了。

 

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

    1.vuex解决了组件之间同一状态的共享问题  （解决了不同组件之间的数据共享）

    2.组件里面数据的持久化。                

小项目不部建议用vuex   

vuex的使用：

1、src目录下面新建一个vuex的文件夹

2、vuex 文件夹里面新建一个store.js

3、安装vuex  

cnpm install vuex --save

4、在刚才创建的store.js引入vue  引入vuex 并且use vuex

import Vue from ‘vue‘

import Vuex from ‘vuex‘

Vue.use(Vuex)

5、定义数据

/*1.state在vuex中用于存储数据*/

var state={

    count:1

}

6、定义方法  mutations里面放的是方法，方法主要用于改变state里面的数据

var mutations={

    incCount(){

++state.count;

    }

}

暴露

const store = new Vuex.Store({

    state,

    mutations

})
export default store;

组建里面使用vuex：

1.引入 store

 import store from ‘../vuex/store.js‘;

2、注册

 export default{

data(){

    return {               

       msg:‘我是一个home组件‘,

value1: null,

     

    }

},

store,

methods:{

    incCount(){

      

this.$store.commit(‘incCount‘);   /*触发 state里面的数据*/

    }

}

    }

3、获取state里面的数据  

this.$store.state.数据

4、触发 mutations 改变 state里面的数据

this.$store.commit(‘incCount‘);

       5、触发 actions里面的方法

this.$store.dispatch(‘incCount‘);

6、{{this.$store.getters.computedCount}}  获取 getters里面方法返回的的数据