Vue.js构建项目笔记1:vue-cli

最新推荐文章于 2024-08-30 21:46:01 发布

weixin_34337265

最新推荐文章于 2024-08-30 21:46:01 发布

阅读量111

点赞数

文章标签： webpack json javascript ViewUI

原文链接：https://my.oschina.net/tbd/blog/1552953

版权

为什么80%的码农都做不了架构师？>>>

一.一些简单的话

如果你学习或者使用过angularjs（1.x），你就会非常了解指令的使用，如：ng-click ng-if ng-show ng-src。当然还有控制器和各种服务。

如果你学习或者使用过react，你就会非常了解组件的使用，同样的其实在angularjs（1.x）也有directive自定义指令创建公用模版部分。

vuejs是实现mvvm的一种框架，他没有ng那样复杂的规则和繁多的语法，而且使用虚拟dom提升了我们单页开发项目的速度。他也不想react那么的“简单”，因为他有很多常用让你处理更快速的语法和规则，学习和学会使用vuejs能让我们在以后的网站开发中多一个更多的选择（最重要的掌握vue绝对是快于ng和react的，而且有好的官网学习网站）。

你是用过ng1.x在实际项目会配合ng-ui-router，也许还有其他；你使用react会配合redux和react-router和其他中间件。

同样的vuejs配合的就是vue-router和vuex，也许对于ajax的处理你还需要一个框架！

二.webpack+vue-cli搭建应用

我们这里不会使用类似jq的方式，在index.html引入一个类库去学习如何使用，我们会直接使用vue的构建工具直接在构建好的项目下学习vuejs，如果不知道webpack（https://my.oschina.net/tbd/blog/1541956）

如果不知道如何安装和使用vue-cli：

首先安装node（百度，系统？64？32？选择安装）
node -v
npm -v
监测是否安装

webpack安装：
npm install -g webpack 全局安装
npm install webpack 项目下安装

Vue脚手架安装：
vue-cli
安装：
npm install -g vue-cli 全局安装
npm install vue-cli 项目下安装

创建项目：
vue init webpack-simple study-vue （描述，作者，是否使用sass,我们no？敲入n）
cd study-vue 切换到创建的项目

三.修改显示内容

上面的安装非常明确，这时候就算你对node，npm，webpack，vue-cli还是一脸蒙蔽，你按着流程走下来，也都安装好了！

我们打开我们的study-vue文件夹，看看我们都有了什么。

如果你没有node等的基础，不了解webpack没有关系，我做一个简单的介绍：

index.html就是我们的静态核心页面，我们完成单页开发，单页指的就是这个页面。

package.json是包文件，里面会配置依赖：

就是我们需要什么框架和工具类库用于我们的项目，除了截图部分，如果你需要jquery，也可以配置进入。

配置的依赖，其实我们本地还没有下载好，我们执行下面命令：

npm install

执行之后，会自动读取package.json，安装配置内容，下载到本地，等待完成：

打开这个文件，你可以看到你配置的各种依赖和相关引用。

记住下面的命令，启动你的项目：

npm run dev

浏览器效果：

很多他的内置工作你不需要了解，你知道找到下面文件修改即可：

<template>
  <div id="app">
    <h3>{{msg}}</h3>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'helloworld'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

浏览器效果：

四.npm run dev

在index.html我们发现引用了一个没有的文件

但是我们浏览器却看到了效果，而我们的main.js里面才看到使用vue文件了：

我们只要记住，在npm run dev指令启动之后，浏览器打开的页面会自动使用main.js，并且自动引用相关即可（深究多了似乎没有用，你其实是学习vue，而不是学习构建工具的原理）！

这是main.js：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

里面运用了es6的知识，如果你不了解（https://my.oschina.net/tbd/blog/1541903）

我们修改代码以后，浏览器会自动刷新！

五.输出helloworld

我们修改两个文件，一个是main.js:

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"><h3>{{ message }}</h3></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

我们可以看到，会找到id叫app的位置，然后{{}}里面的会被动解析出dada设置的内容。

我们在data里面多设置一些key和val，然后在html中显示他们，我们就知道如何工作了：

import Vue from 'vue'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"><h3>{{ message }}{{d2}}{{d3}}</h3></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

效果如下：

六.设置应用范围（挂载）

最简单的就是data里面设置的字段，{{}}包含是可以解析的，这个{{}}是有范围的，如果是一个普通html{{}}肯定不起作用，其实这个应用范围就是在哪个位置内部使用vue的处理，

1.el 设置

vue提供的就是在新建实例设置el属性，这个#app就是找到id叫这个的元素，同样可以是.app类名叫这个的，

import Vue from 'vue'

var app = new Vue({
  el: '.app',
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div class="app"><h3>{{ message }}{{d2}}{{d3}}</h3></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

也可以document获取一个元素节点，

import Vue from 'vue'

var app = new Vue({
  el: document.getElementById("app"),
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
})

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"><h3>{{ message }}{{d2}}{{d3}}</h3></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

2.vm.$mount()

支持手动挂载：

import Vue from 'vue'

var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
})
app.$mount("#app")

这样写一个意思：

import Vue from 'vue'

var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
}).$mount("#app")

七.渲染结构

1.普通设置

我们现在的结构渲染是在html的内部：

2.template 设置

import Vue from 'vue'

var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  },
  template:"<div id='app'><h3>{{ message }}{{d2}}{{d3}}</h3></div>"
}).$mount("#app")

我们可以看到挂在位置都会被template的模版内容替换掉：

3.render 使用jsx渲染

render的方法会在回调中获取createElement，

我们的第一个参数使用标签的形式去使用：

import Vue from 'vue'

var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  },
  template:"<div id='app'><h3>{{ message }}{{d2}}{{d3}}</h3></div>",
  render:function(createElement){
	  return createElement("div","<h3>"+this.message+this.d2+this.d3+"</h3>")
  }
}).$mount("#app")

当render和template都存在，我们的render会剔掉template的设置：

同样的createElement是支持组件对象的，我们马上学习组件的使用。

八.设置组件

vue最最重要的就是组件的使用，开始就是组件开发，组件有多种模版设置方式，不过都很简单。

我们直接看最简单方式：

// 注册
Vue.component('my-component', {
  template: '<div class="zj">123</div>'
})

这样我们就设置好了一个组件，我们使用组件和写div类似：

import Vue from 'vue'

// 注册
Vue.component('my-component', {
  template: '<div class="zj">123</div>'
})


var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  }
}).$mount("#app")

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"><my-component></my-component></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

这时候我们学会了定义一个组件，也知道了组件对象的形式，我们解决render的问题：

import Vue from 'vue'

// 注册
var App= {
  template: '<div id="app">123</div>'
}


var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  },
  render:function(createElement){
	  return createElement(App)
  }
}).$mount("#app")

我们的createElement使用了组件对象做参数，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

我们再次结合组件去处理，把设置的组件放在里面：

import Vue from 'vue'

var App= {
  template: '<div id="app"><my-component></my-component></div>'
}


// 注册
Vue.component('my-component', {
  template: '<div class="zj">我是自定义组件</div>'
})




var app = new Vue({
  data: {
    message: 'Hello Vue!',
	d2:"d2",
	d3:"d3"
  },
  render:function(createElement){
	  return createElement(App)
  }
}).$mount("#app")

效果：

我们已经写好了一个App组件对象，这个就是我们render的主结构。

也同样支持render的方式设置组件模版，如果你需要的话。

组件模版定义有大概四种方式：

1.template直接定义

2.script定义和引用

3.render的jsx

4.异步渲染

我们学习当中使用template直接定义即可！

九.总结

我们把main.js做es6的改造：

import Vue from 'vue'

var App= {
  template: '<div id="app">helloworld</div>'
}


var app = new Vue({
  render:h=>h(App)
}).$mount("#app")

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>stydy-vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

如果你还记得最开始创建项目的代码：

再看看App.vue文件你或许应该明白在vue文件最后被解析成什么了:

我们修改一下App.vue的代码，如果你还不明白：

<template>
  <div id="app">helloworld</div>
</template>

<script>
export default {
  name: 'app'
}
</script>

这时候我们就会发现，其实一个vue文件最终被解析好的就是组件对象形式，他利用的就是：

十.其他了解

采用 vue init webpack 构建项目，可在config/index.js配置代理等

首先安装node（百度，系统？64？32？选择安装）
node -v
npm -v
监测是否安装

webpack安装：
npm install -g webpack 全局安装
npm install webpack 项目下安装

Vue脚手架安装：
vue-cli
安装：
npm install -g vue-cli 全局安装
npm install vue-cli 项目下安装

创建项目：
vue init webpack（根据提示设置）

安装依赖
npm install

需要其他依赖
打开package.json
如果需要使用vue-router和vuex
在devDependencies最后加入对应配置：
"vue-router": "^",
"vuex": "^"
如果还需要axios，同理
npm install 执行后等待安装好所有依赖

启动项目：
npm run dev # 一切就绪！

打包合并生成项目：
npm run build 执行命令，等待完成
（合成后直接打开静态页面index.html报错？
可以修改config下index.js配置
assetsSubDirectory的属性
'/static'修改为'static'

后续安装依赖：
没有vue-router?????
执行：
npm install vue-router
还需要vuex?????同理


重要说明：
babel-polyfill模块保证es6的语法在ie9 10得到支持（如es6的生成器等，map类型等）

转载于:https://my.oschina.net/tbd/blog/1552953