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中显示关于环境的相关提示信息。

1 new Vue({

2   el: '#app',

3   render: h => h(App)

4 })

这里的 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

 1 <template>

 2   <div id="app">

 3     <img src="./assets/logo.png">

 4     <HelloWorld/>

 5   </div>

 6 </template>

 7

 8 <script>

 9 import HelloWorld from './components/HelloWorld'

10

11 export default {

12   name: 'App',

13   components: {

14     HelloWorld

15   }

16 }

17 </script>

18

19 <style>

20 #app {

21   font-family: 'Avenir', Helvetica, Arial, sans-serif;

22   -webkit-font-smoothing: antialiased;

23   -moz-osx-font-smoothing: grayscale;

24   text-align: center;

25   color: #2c3e50;

26   margin-top: 60px;

27 }

28 </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的样式仅在当前组件有效，申明了样式的作用域，表示当前的界面时私有的。

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

巴特西

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

最新文章

热门文章