最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

ue2学习之旅一:初始化项目搭建(不带路由)

XAMPP新闻 admin 1301浏览 0评论
【不使用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:
<!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,在模板中使用了他,然后页面就显示出来了结果

转载请注明:XAMPP中文组官网 » ue2学习之旅一:初始化项目搭建(不带路由)

您必须 登录 才能发表评论!