vue搭建脚手架

时间 2019-11-17

标签 vue 搭建脚手架繁體版

原文原文链接

Vue.js

Vue.js（读音 /vjuː/, 相似于view）是一套构建用户界面的渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
　　Vue.js 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件。
　　Vue.js 自身不是一个全能框架——它只聚焦于视图层。所以它很是容易学习，很是容易与其它库或已有项目整合。另外一方面，在与相关工具和支持库一块儿使用时，Vue.js 也能完美地驱动复杂的单页应用。css

今天来简单介绍下使用vue搭建脚手架：

安装Vue.js

（1）独立安装

　　在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

（2）使用CDN方法

　　如下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前仍是建议下载到本地。

　　BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js
　　unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
　　cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.jshtml

　　使用<script> 直接引入这个地址便可使用vue

（3）NPM方法webpack

　　Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。git

 1 # 全局安装 vue-cli
 2 $ cnpm install --global vue-cli
 3 # 建立一个基于 webpack 模板的新项目
 4 $ vue init webpack my-project
 5 # 这里须要进行一些配置，默认回车便可
 6 This will install Vue 2.x version of the template.
 7 
 8 For Vue 1.x use: vue init webpack#1.0 my-project
 9 
10 ? Project name my-project
11 ? Project description A Vue.js project
12 ? Author runoob <test@runoob.com>
13 ? Vue build standalone
14 ? Use ESLint to lint your code? Yes
15 ? Pick an ESLint preset Standard
16 ? Setup unit tests with Karma + Mocha? Yes
17 ? Setup e2e tests with Nightwatch? Yes
18 
19    vue-cli · Generated "my-project".
20 
21    To get started:
22    
23      cd my-project
24      npm install
25      npm run dev
26    
27    Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：github

1 $ cd my-project
2 $ cnpm install 3 $ cnpm run dev 4  DONE  Compiled successfully in 4388ms
5 
6 > Listening at http://localhost:8080

这样就生成了一个新项目，而后咱们看一项目结构：web

而后看一下几个主要文件的内容：ajax

　　index.html文件vue-cli

1 <html>
2   <head>
3     <mate chaiset="utf-8">
4     <title>vue-playlist</title>
5   </head>
6   <body>
7     <div id="app"></div>
8   </body>
9 </html>

　　main.js文件npm

 1 improt Vue from 'vue'       //能够将脚手架中下载的模块拿出来，能够直接使用new来实例化vue对象
 2 improt App from './App'     
 3 
 4 Vue.config.productionTip = false
 5 
 6 new Vue({
 7    el:'#app',              //当前的vue要控制的容器是谁，要获取的这个容器元素是谁，#app是index.thml里的id=“app”
 8    template:'<App/>',      //模板，能够写对应的div，也能够写组件调用的标签，只要有一个根标签便可
 9    components:{ App }      //想要调用组件，必须在component里注册这个组件，这里的APP来源于引入的./App文件，即：App.vue文件
10 })

　　App.vue文件：

 1 <!--1模板：html结构 -->
 2 <template>
 3   <div id="app">
 4     <img src="./assets/logo.png">
 5     <HelloWorld/>
 6   </div>
 7 </template>
 8 
 9 <!--2行为：处理逻辑 -->
10 <script>
11 import HelloWorld from './components/HelloWorld'
12 
13 export default {
14  name: 'App',
15  components: {
16     HelloWorld
17   }
18 }
19 </script>
20 
21 <!--3样式：解决样式 -->
22 <style>
23 #app {
24   font-family: 'Avenir', Helvetica, Arial, sans-serif;
25   -webkit-font-smoothing: antialiased;
26   -moz-osx-font-smoothing: grayscale;
27   text-align: center;
28   color: #2c3e50;
29   margin-top: 60px;
30 }
31 </style>

模板：
　　template能够用它去包括一些内容，它自己并不会真正的渲染到dom里面去，能够直接使用template标签包括起来，注意：template里有且只能有一个根标签。

行为：
　　经过import来跟别的组件进行关联，而后经过

1  export default {
2   name: 'App',
3   components: {
4     HelloWorld
5   }

注册一下就能够调用了。

样式：
　　跟css样式同样,这里再也不作说明。

项目加载过程

　　项目开始：index.html ----> main.js ----> App.vue　　由index.html入口文件，他会执行main.js文件，main.js会实例化咱们的Vue对象，接下来会执行App.vue组件，到了App.vue之后，若是模板有内容的话，他会将模板中的内容插入到index.html的容器当中，也能够在行为属性里设置对应的属性。