Vue 2.0 简单项目创建
LanyuanXiaoyao's Blog ヽ(✿゚▽゚)ノ

Vue 2.0 简单项目创建

2017-06-23
Vue

前言

老大说要重构后台,现在要调研前端框架,于是对前端一窍不通的我就来研究了一把Vue……

简介

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue 的三大特点:

  • 易用 已经会了HTML,CSS,JavaScript?即刻阅读指南开始构建应用!
  • 灵活 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
  • 性能 17kb min+gzip 运行大小 超快虚拟 DOM 最省心的优化

总而言之,简单和轻量是Vue的最大特点,数据的双向绑定也让页面数据处理变得无比简单

环境

Node.js

作为前端框架,Vue是不需要依赖后端服务器就可以运行的,所以使用Node.js是为了方便管理Vue的依赖和项目,最后我们是可以把项目打包成为单独运行的应用。

官网

https://nodejs.org/en/
国内镜像网站 http://nodejs.cn/

安装

安装有两种方式:安装包绿色版
以上两种方式均可在官网上下载到,选择对应的CPU位数即可

配置环境变量

划重点!!
如果你是使用安装包来安装,那么你安装完后就直接可以用了,如果你下载了绿色版那么就需要配置环境变量,但是如果你需要为安装包版本的Node.js更换一些目录,那么也可以在下面找到相应步骤,因为我会一次性配置完绿色版和一些目录的更换。

创建两个文件夹

全局缓存文件夹
node_cache
全局插件文件夹
node_global

这是为了绿色版装在非系统盘里,那么这两个默认建在C盘的文件夹就要转移

设置全局文件夹

首先打开命令提示符,然后cd进Node.js的解压目录,执行

npm config set prefix"[路径]\node_global"
npm config set cache "[路径]\node_cache"

自行替换[路径]为你解压到的Node.js的根目录(下面文内均以此表示,不再说明)

设置环境变量

进入系统→高级系统设置→环境变量

创建新的系统变量NODE_PATH
值为[路径]\node_global\node_modules

在PATH变量中加入
[路径]
[路径]\node_global
[路径]\node_global\node_modules

这个环境变量的配置方式我亲测可用,但是网上的配置大致相同,有一些设置有不一样,很多的配置方法在我的这里并不能用,所以如果我的方法不起作用大可试试别的方法。

测试环境变量配置

在命令提示符中输入node -v,出现版本号即配置成功

当然,npm也是要试一下的

国内镜像源

众所周知,不管是什么库,只要是国外的,就会很慢,比如maven,比如ruby,所以npm也不例外,恰好我们还有由阿里维护的镜像源,只需要简单地

npm install  --registry=https://registry.npm.taobao.org

就可以使用阿里的镜像源了

Vue Cli

Vue-cli是Vue官方提供的一个脚手架(大家都这么叫),其实说白了就是一个工程构建脚本,可以帮助我们快速构建一个Vue项目框架,就不需要我们自己去配一些环境参数之类的东西了

安装

npm install vue-cli -g

使用Vue Cli

首先我们创建我们需要创建工程的文件夹,然后cd进入,比如我创建的文件夹是E:\vuework,然后在命令行

vue init webpack vue-demo

然后等待下载模板,一般这个速度是非常快的

然后会要求输入关于这个项目的一些信息,比如项目名和描述之类的,在输入作者之后会选择build模式,这里直接回车就是了,其中后面4个是代码格式校验的相关插件,我们在Demo的时候可以选择No,实际项目再根据情况而定

如过要尝试运行项目的话,脚手架工具在最后也给出了命令

cd [项目文件夹]
// 下载依赖
npm install
// 已开发模式运行
npm run dev

其中依赖下载还是比较耗费时间的

然后运行npm run dev

然后会自动打开浏览器跳转到页面,当我们看到这个界面的时候就表示我们已经成功创建一个简单的Vue项目了

可以看到上图红框内的地址,这说明实际上npm帮我们开了一个简单的服务器环境来运行我们的项目

目录结构

构建完成之后的目录结构是这样的(别问我为什么不是同一台电脑,因为我不想在我电脑上把vue-cli卸了又装一次)

目录介绍

  • build 这里是webpack构建的参数设置
  • config 这里是npm相关参数设置
  • node_modules 依赖下载地址,这个目录可以无视
  • src 这里是真正写代码的地方,这个目录下的子目录是可以自己随意设置的,可以根据自己的习惯来设置,这里的只是Vue Cli默认的
    • assets 这里放资源文件
    • components 这里放自定义组件,也可以说是界面,这是Vue本身的概念,不赘述
    • router vue-router路由设置
  • static 这个目录放置静态文件,比如css,js文件等

文件介绍

这里说明一些必须的固定的文件
(build,config目录的文件如果不清楚其中作用的话最好别动)

main.js

这是整个Vue工程的入口js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

App.vue

这个是主界面文件,也就是单页应用的那个唯一的页面

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</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>

工程打包

不知道是不是这个词,反正就是build出可以在实际环境使用的文件,以上的工程目录是开发环境,实际上我们Vue的运行是不需要Node环境的,所以怎么生成实际使用的文件呢,只需要一个命令:

npm run build

这个打包的目标目录是config→index.js这个文件指定的,其中有这样的两行

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  build: {
    env: require('./prod.env'),
	
	// 就是下面的这两行
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
	
	assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    ……略……
  }
}

所以我们可以在项目目录下看到多出了一个dist目录,其中有一个index.html文件和static文件夹,这个html文件就是入口文件,文件夹里面就是所有的样式和js文件,两个东西就是我们以后要放在服务器运行的文件

欸,这个时候应该会有人直接就点index.html文件试图打开,然后我们会看到一篇空白,不是说vue只是javascript吗?怎么不能直接运行,其实这是因为这个build出的文件是要在服务器环境下使用的,其中的资源文件使用的都是相对地址,所以当然找不到对应的css和js文件,如果要直接运行也要看到效果怎么办呢?其实很简单,我们只要把相对地址改成绝对地址就可以了,也就是上面同一个配置文件的这一行

assetsPublicPath: '/'
// 改为
assetsPublicPath: './'

就是加上一个点,然后寻址就变成从当前文件夹寻找,就可以通过直接大开的方式运行了


评论