[前端笔记] Vue.js学习---脚手架方式搭建vue项目

使用npm脚手架方式搭建vue项目

1.国内用户推荐使用国内优秀镜像

如何使用

有很多方法来配置npm的registry地址，下面根据不同情境列出几种比较常用的方法。以淘宝npm镜像举例：

a.临时使用

npm --registry https://registry.npm.taobao.org install express

b.持久使用

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

// 配置后可通过下面方式来验证是否成功

npm config get registry

// 或

npm info express

c.通过cnpm使用

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

// 使用

cnpm install express

如果不能使用npm则说明没有装nodejs

2.想使用vue脚手架需要装一个cli（Vue-cli是快速构建这个单页应用的脚手架）我们这里使用cnpm，也就是使用咱们自定义的淘宝镜像来使用。

a、检测cnpm是否成功。

Cnpm -v

b、全局安装vue-cli

Cnpm install -g vue-cli

c、装完vue-cli我们就可以去初始化我们的项目。

Vue init <template-name> <project-name>

例：vue init webpack my-project

这时我们会需要给这个项目做一些描述:Project name、Project description 、Author 、Use sass

d、我们进入自己初始化后的项目，然后启用它.

Cd my-project

Cnpm install （这个时候我们就会下载我们脚手架里面所依赖的模块）

npm run dev （启动项目）

---

写一个vue的demo

1.使用sublime写vue,一般不会高亮显示.做如下处理

a.打开 sublime --> Perferences -->PackageContro

b.打开 Install Package

c.输入vue找到相应插件Vue Syntax Highlight

d.下载完成，重启sublime

2.打开刚才创建的项目.找到src/app.vue文件

a.删除多余部分。留下基本框架结构。

b.写一个app.vue文件代码

<template>
  <div id="app">
    <product-list-one v-bind:products='products'></product-list-one>
    <product-list-two v-bind:products='products'></product-list-two>
  </div>

</template>

<script type="text/javascript">
import ProductListOne from './components/ProductListOne'
import ProductListTwo from './components/ProductListTwo'
  export default{
    name:'app',
    components:{
      'product-list-one':ProductListOne,
      'product-list-two':ProductListTwo,
    },
    data(){
      return {
        products:[
          {
            name:'马云',price:200
          },
          {
            name:'发达',price:2000
          },
          {
            name:'发动',price:999
          },
          {
            name:'跟董',price:2123
          }
        ]
      }
    }
  }
</script>

<style type="text/css">
</style>

c.在components下写两个app.vue中添加的dom

ProductListOne.vue

<template>
	<div id="product-list-one">
		<h2>Product List One</h2>
		<ul>
			<li v-for="product in products">
				<span class="name">{{product.name}}</span>
				<span class="price">{{product.price}}</span>
			</li>
		</ul>
	</div>
</template>
<script >
	export default{
		props:["products"],
		data(){
			return {
			}
		}
	}
</script>
<style>
</style>

ProductListTwo.vue

<template>
	<div id="product-list-Two">
		<h2>Product List Two</h2>
		<ul>
			<li v-for="product in products">
				<span class="name">{{product.name}}</span>
				<span class="price">{{product.price}}</span>
			</li>

		</ul>
	</div>

</template>

<script>
	export default{
	props:["products"],
		data(){
			return {
			}
		}
	}
</script>
<style>
</style>

问题1：

在vuejs程序启动时，会遇到一种常见问题，在终端报错：Unexpected tab character。

解决方法：

在eslint的配置文件中（.eslintrc）rules项中添加一行："no-tabs":"off"，

问题2：

编译时终端报错：Expected indentation of 2 spaces but found 1 tab

解决方法：

因为设置了eslint，如果不想有规范的js代码，可以重新初始化关掉eslint。

Use ESLint to lint your code? (Y/n) 这一步选no

问题3：

在components下的vue无法获取到app中定义的对象。

解决方法：

检查app.vue文件下，是否已经给两个导入dom上进行v-bind绑定

<product-list-one v-bind:products='products'></product-list-one>

检查components下的是否export 导出了products对象

props:["products"]

搭建vuex中央状态管理区

1.使用vuex，可以去www.npmjs.com，查看相关文档

Vuex是针对vue.js的中间状态管理区

2.安装vuex命令

cnpm install vuex --save

3.安装成功以后会在package.json中dependecies标签下会出现一个vuex:x.x.x 的版本号

4.以上操作完成以后我们就可以搭建我们的store

a.首先我们的目的是要将我们app.vue中的对象products抽离出来.

b.那么我们在src下创建一个store文件夹

c.然后在store文件下创建一个js文件

import Vue from 'vue'
import Vue from 'vuex'

Vue.use(Vuex)
exprot const store = new Vuex.store({
state:{
products:[
{
name:'马云',price:200
},
{
name:'发达',price:2000
},
{
name:'发动',price:999
},
{
name:'跟董',price:2123
}
}
});
    

d.在main.js文件下，对我们的store进行配置。

Import {store} from './store/store'

New Vue({

Store:store,

El:'#app'

})

e.因为使用vuex的store，所以在app.vue中对应的product就不需要使用v-bind

f.对应的两个dom的vue中，也就不能使用props来获取products对象。而是换作使用

computed:{
	products(){
		return this.$store.state.products
	}
}

g.同样使用v-for=“product in products”,来获取咱们对象