Vue2学习之旅一：初始化项目搭建（不带路由）

时间 2019-11-07

标签 vue2 vue 学习之旅初始化项目搭建带路繁體版

原文原文链接

做者：心叶
时间：2018-04-25 16:33css

本篇最终项目文件Github地址：github.com/paper520/vue.quick/tree/V1html

Vue2学习之旅系列文章目录vue

【不使用vue-cli搭建，由于那样会遗落太多细节没有说明】node

下面，咱们来一步步使用webpack搭建一个用来学习Vue2的环境，力求没有冗余的代码，让咱们开始吧！webpack

备注：后面的学习所有基于这个环境来进行！git

先来看看最终的项目结构：github

总体说明

(1)build/main.js和node_modules是自动生成的，先无视web

(2)package.json里面是须要用到的node包和一些配置，内容以下：vue-cli

{
  "name": "vue.quick",
  "version": "0.0.0",
  "scripts": {
    "start": "node_modules/.bin/webpack-dev-server --inline --hot --port 20000",
    "release": "node_modules/.bin/webpack"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^6.4.1",
    "css-loader": "^0.28.11",
    "vue-loader": "^11.3.4",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "vue": "^2.2.6"
  }
}

既然是vue开发，所以vue包是必须的，webpack是打包框架，webpack-dev-server是服务器，vue-loader和babel-loader分别是用来解析.js和.vue文件的，余下的都是这二个包依赖的。npm

上面的start和release分别是配置启动服务器和打包的

（3）webpack.config.js是用来配置webpack的，先看看具体内容：

var webpack = require('webpack');
module.exports = {
    entry: ['./src/entry.js'],
    output: {
        path: __dirname,
        filename: 'build/main.js'
    },
    module: {
        loaders: [{
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
};

入口文件是entry.js，打包的结果存放在main.js，而后配置了如何解析.vue和.js文件

（4）接着是index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>vue.quick</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="./build/main.js"></script>
    </body>
</html>

除了引入了最后打包的文件main.js外，请记住id='root'，姑且称为挂载点。

(5)最后还剩下二个文件没有说了，先看看App.vue，这个叫作【单文件组件】，其实就是一个vue组件，看看内容（具体写法先无视，后面会细说）：

<template>
    <span>
        {{ msg }}
    </span>
</template>

<script>
export default {
  data() {
    return {
      msg: "vue.quick - 基本版本代码"
    };
  }
};
</script>

<style>
span {
  color: blue;
}
</style>

（6）最后一个，也就是打包入口文件entry.js，先看看内容：

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

//根对象
var vm = new Vue({
    //挂载点
    el: '#root',
    //启动组件
    render: function (callback) {
        return callback(App);
    }
});

能够简单的理解，这就是一个vue对象，前面（5）说的组件被他使用了，具体的仍是后面细说。

启动项目

所有的文件都在本地保存好以后（node.js须要保证安装好），命令行进入项目，确保dir或者ls的时候能够看见package.json，而后运行：

npm install

这样就安装好了须要的node包，接着咱们启动服务：

npm start

若是用的是上面的配置，如今在浏览器访问localhost:20000/应该就能够看见蓝色的【vue.quick - 基本版本代码】几个字了。

除此以外，你还能够运行打包命令：

npm run release

此时以前说的打包生成的main.js文件应该就生成了，或者选择用浏览器打开index.html应该也能够看见和刚刚同样的结果。

vue对象说明

你能够认为，一个vue对象（也有的叫vue实例）就是一个管理一块页面区域的东西，具体管理哪一块区域是根据挂载点来肯定的，还记得以前说的index.html里面的挂载点吗，就是和这里的el属性对应的，这里的el属性的值是#root，表示挂载到id=root的标签上，那一块归这个vue对象管理了。

而如何建立一个vue对象是vue知道，所以开头引入了Vue，并使用它常见了一个vue对象，而后这个对象就管理了这一块区域。

但是管理以后，这一块具体如何渲染，有什么交互等，由于是vue对象，直接看VUE的API就知道了

这里用到了render属性，表示使用App这个vue单文件组件来处理这一块，所以，接着看这个组件里面的东西。

vue单文件组件

组件里面的地方能够划分三块：template，script和style。

4.1 template表示组件模板，有点相似html代码，不过有一点点区别

4.2 style表示样式，你能够在这里写修改模板的css文件

4.3 script能够理解为管理数据和控制的，好比这里定义了一个数据msg，在模板中使用了他，而后页面就显示出来告终果

结束语

到这里，若是项目已经启动成功，而且对这些文件已经有了大体的理解，那么就能够了，具体的细节会在后续文章中说明。