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

lijy91 发布于2019-08-22 16:43 / 817人阅读

摘要：除此之外，你还可以运行打包命令此时之前说的打包生成的文件应该就生成了，或者选择用浏览器打开应该也可以看见和刚刚一样的结果。而如何创建一个对象是知道，因此开头引入了，并使用它常见了一个对象，然后这个对象就管理了这一块区域。

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

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

Vue2学习之旅系列文章目录

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

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

备注：后面的学习全部基于这个环境来进行！

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

整体说明

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

(2)package.json里面是需要用到的node包和一些配置，内容如下：

 {
  "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文件的，余下的都是这二个包依赖的。

上面的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：



    
        
        vue.quick

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

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

（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，在模板中使用了他，然后页面就显示出来了结果

结束语

到这里，如果项目已经启动成功，并且对这些文件已经有了大致的理解，那么就可以了，具体的细节会在后续文章中说明。

云服务器 GPU云服务器学习之旅路由器上搭建网站 vue2.0 cdn Vue2x

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94593.html

前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0
使用 Vue2.js + Node.js 搭建一个小型的全栈项目

摘要：大概过来一个多月，我决定两路开工。使用给前端写接口，配备后台管理功能，先把后台搭建好。大概几天过后，后台一些简单的功能实现后，就开始用开始搭建前台，也一直在想做点什么比较好，于是就做了个豆瓣评分类似的项目。写在前面由于最近公司业务不是很忙，空闲时间比较多，于是就在纠结Vue.js（之前就学习过）和Node.js先专研哪个比较好，最终选择了先玩玩Node.js。经过一段时间的学习，就...

freewolf 2019-08-21 16:20 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0