vue第1篇:安装, 初始化工程,第一个实用demo

玩了一年多vue, 觉得确实挺好用. 这个系列会写一些实战心得, 你可以在我的githup上下载工程自己跑跑. 教程打算面向代码熟手, 基础知识点请自行查询.

githup的工程在:

git clone https://github.com/yunshichen/fei_demo

基础知识

设置npm

先要设置npm, 不然安装库像蜗牛走路一样慢. 打开命令行并敲入:

npm config set registry https://registry.npm.taobao.org/

这样就ok了

安装vue

npm install vue vue-cli -g

初始化工程

如果你已经下载了我的githup工程, 不需要再初始化工程了. 直接 npm install && npm run dev 即可.

运行这个命令:

vue init webpack fei_demo 

将会在当前文件夹生成一个目录 fei_demo , 然后可以用你喜欢的编辑器打开里面的文件. 我是用 visual studio code .

直接运行

cd fei_demo/demo1
npm install && npm run dev 

会看到命令行有提示. 敲入 localhost:8080 , 即可看到这个界面:

image.png

关键代码解释

作为新手你先记住, 这个vue程序会先加载main.js. 这个文件的主要作用是作为入口, 引入App.vue这个文件, 真正的模板代码由App.vue开始. main.js 另一个主要作用是引入第三方包(特别是原生的css和js), 以后我会写.

main.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,
  components: { App },
  template: ''
})

你可以看到在初始化vue(new vue) 之后有几个参数, 它们的意思分别是:

• el: 表示对应的模板id. (这个属性在初学的时候并不重要. 如果你是用 vue init 来初始化工程, 不需要改动)
• router: 表示使用vue 路由. 路由的意思, 就是用不同的字符串路径对应不同的组件, 概念理解复杂, 实际应用简单.
• components: vue 引入其他组件的特定语法, 死记硬背即可.
• template: 这个文件的内容最终生成到哪个文件(术语称为渲染). 和el属性一样, 初学的时候你不需要修改.

App.vue

App.vue的内容如下:

用