Vue的官方脚手架 Vue-cli 安装使用解析

------------恢复内容开始------------

1.首先什么是vue-cli

可以知道Vue-cli是一个官方提供的脚手架，主要作用是用来快速搭建Vue的项目模板，可以预先定义好项目的结构和基础代码。

2.如何安装vue-cli

在控制台输入：

cnpm install vue-cli -g 
# 这里的g代表全局生效

在控制台输入

vue list

可以出现vue-cli创建项目的不同的6种模板。

 

 看到上述的描述，我们一般需要创建一个基于webpack模板的vue应用。

在相应的目录下，使用以下的cmd命令

vue init webpack myvue 
# 这里的 myvue是项目的名称，是自己取得。

然后会出现一堆需要我们自己进行选择的选项。一步一步进行就可以了。以下，是出现的选项，我们逐一分析。

Project name:项目名称

Project description:项目描述

Author:项目作者，默认回车。

Install vue-router:是否安装路由，一般选n,后期手动添加。

Use ESLint to lint your code:是否选择使用ESLint进行代码检查，一般选n,后期手动添加。

Set up unit tests:单元测试相关，一般选n,后期手动添加。

Set e2e test with Nightwatch:单元测试相关，一般选n,后期手动添加。

Should we run npm install for you after the project has been created：选择n,创建完成之后，我们选择手动初始化。

执行完上述步骤，一个项目就已经被创建完成了。

3.对创建好的程序，我们要进行初始化，并且添加依赖。类似于 java中的maven仓库。

cd myvue # 进入创建好的项目
npm install  # 使用该命令添加环境依赖
npm run dev # 运行开发环境

执行完成过后，我们在项目中会多出一个node-modules的文件夹，会多出很多的依赖文件。

安装完成之后运行 npm run dev，就可以运行上述的程序了。

 

 

 

------------恢复内容结束------------

------------恢复内容开始------------

1.首先什么是vue-cli

可以知道Vue-cli是一个官方提供的脚手架，主要作用是用来快速搭建Vue的项目模板，可以预先定义好项目的结构和基础代码。

2.如何安装vue-cli

在控制台输入：

cnpm install vue-cli -g 
# 这里的g代表全局生效

在控制台输入

vue list

可以出现vue-cli创建项目的不同的6种模板。

 

 看到上述的描述，我们一般需要创建一个基于webpack模板的vue应用。

在相应的目录下，使用以下的cmd命令

vue init webpack myvue 
# 这里的 myvue是项目的名称，是自己取得。

然后会出现一堆需要我们自己进行选择的选项。一步一步进行就可以了。以下，是出现的选项，我们逐一分析。

Project name:项目名称

Project description:项目描述

Author:项目作者，默认回车。

Install vue-router:是否安装路由，一般选n,后期手动添加。

Use ESLint to lint your code:是否选择使用ESLint进行代码检查，一般选n,后期手动添加。

Set up unit tests:单元测试相关，一般选n,后期手动添加。

Set e2e test with Nightwatch:单元测试相关，一般选n,后期手动添加。

Should we run npm install for you after the project has been created：选择n,创建完成之后，我们选择手动初始化。

执行完上述步骤，一个项目就已经被创建完成了。

3.对创建好的程序，我们要进行初始化，并且添加依赖。类似于 java中的maven仓库。

cd myvue # 进入创建好的项目
npm install  # 使用该命令添加环境依赖

执行完成过后，我们在项目中会多出一个node-modules的文件夹，会多出很多的依赖文件。

安装完成之后运行

npm run dev # 运行开发环境

访问http://localhost:8080/ 就可以运行上述的程序了。

现在我们来分析一下这个使用vue-cli搭建的项目的目录结构

• build和config:这2个目录中存放webpack的配置文件
• node-modules:存放配置的依赖文件，上面已经说过了。
• src:项目源码
• static:静态资源文件
• .baberlrc:Babel配置文件，主要就是把ES6的语法转换成ES5
• .editorconfig:需要忽略的语法检查配置文件
• .gitignore:git忽略的相关配置文件
• .postcssrc.js:css的相关配置文件，内部的module.exports是Nodejs模块化语法
• index.html：首页，实际开发中不用
• package.json:该项目的配置文件
  • name:项目名
  • version:版本号
  • description:项目描述
  • author:项目作者
  • scirpts:封装常用命令
  • dependencies:生产环境依赖
  • devDependencies:开发环境依赖

4.下面我们注重分析一下src目录

大家都知道src目录是项目的源代码，所有的关于项目的源码都会写在这里。

首先我们分析main.js

 main.js是项目的入口文件。

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

分析上述代码：

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

上面的这2行代码是ES6的写法，会被转换成require("vue")和require("./App")

Vue.config.productionTip = false

上述代码表示关闭在网页的console中显示关于环境的相关提示信息。

new Vue({
  el: '#app',
  render: h => h(App)
})

这里的 new Vue代表创建一个新的Vue实例

el:'#app'代表，将会在index.html中查找id为app的元素。

这里的render:h=>h(app)是ES6的简写，其实是表示如下意思

render: function (createElement) {
     return createElement(App);
}

在Vue1.0中，是这样写的：

new Vue({
  el: '#app',
  template:'</App>'
  componets: {App}
})

然后在页面中使用

<div id='app'>
  <app></app>
</div>

在main.js中引用了app这个组件。

我们现在再来看一下App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</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>

上述代码中

• template表示HTML模板，他会替换掉<App/>中的内容
• import HelloWorld from './components/HelloWorld'：引入 HelloWorld 组件替换 template 中的 < HelloWorld/>
• export default{...}：导出 NodeJS 对象，作用是main.js可以通过 import 关键字导入
  • name:定义组件的名称
  • components:定义子组件

在Helloword组件中最后有一个style scoped标签。

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

这里说明一下：style scoped 就是声明了CSS的样式仅在当前组件有效，申明了样式的作用域，表示当前的界面时私有的。

 

 

 

 

 

------------恢复内容结束------------