Vue2.0 系列教程:初始化项目

3953 次阅读 zuley 发布于 2年前 (2016-11-18) 前端开发 0 评论

通过之前的教程《Vue2.0系列教程:Vue的安装和使用》,我们已经可以创建一个全新的空的 Vue 项目了。
现在这个教程就是进一步的完善它,为我们的项目安装各个依赖。

一、项目依赖

  1. vue-router 路由模块
  2. element-ui UI组件
  3. LeanCloud LeanCloud SDK

二、安装依赖

安装命令后面加上 -S 后缀,将模块安装到生产环境中

# 安装路由插件
$ npm install vue-router -S

# 安装UI组件
$ npm install element-ui -S

# 安装leanCloud SDK
$ npm install leancloud-storage -S

三、在项目中导入依赖,并注册

路由配置,我们在接下来的文章中讲。这里值得一提的是,如果 import 导入了模块,但是下面没有用上,代码是会报错的,提示定义的模块没有被使用。

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

// 导入路由组件
import VueRouter from 'vue-router'

// 导入UI组件
import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

// 导入路由配置文件
import routerConfig from './routerConfig.js'

// 注册插件
Vue.use(VueRouter)
Vue.use(Element)

// 创建路由
const router = new VueRouter({
  routes: routerConfig
})

// 实例化
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

第一讲:起步

  1. Vue2.0 系列教程:简介
  2. Vue2.0 系列教程:npm 常用命令
  3. Vue2.0 系列教程:npm package.json 配置文件语法
  4. Vue2.0 系列教程:Vue的安装和使用

第二讲: 构建环境和安装依赖

  1. Vue2.0 系列教程:初始化项目
  2. Vue2.0 系列教程:配置路由
  3. Vue2.0 系列教程:使用 leancloud 云服务

第三讲:开发页面

  1. Vue2.0 系列教程:注册页面
  2. Vue2.0 系列教程:登录页面
  3. Vue2.0 系列教程:首页 OR 退出登录
二维码
扫描此二维码去手机端访问

Vue2.0 系列教程:初始化项目

文章评论

发表评论