Vue-cli3.0项目建立

简介

以前写过一篇文章Vue-cli项目建立,主要是针对Vue-cli3.0版本以前的，因为如今Vue-cli版本更新到了3.0，并且建立项目的一些状况也发生了变化，因此本篇将在基于Vue-cli3.0以上版本建立项目，你们能够参考一下Vue-cli2.0版本（这里的Vue-cli3.0版本以前统称为2.0版本）和Vue-cli3.0版本的不一样之处，不要混淆了。
你们也能够进入Vue-cli3官网进行查看相关信息。

安装

说明

这里不介绍Vue-cli3.0项目所需的Node.js那些安装了，可是Node.js版本必须是8.9 或更高版本(推荐 8.11.0+)，你们还不清楚的话就去查看我以前写的文章Vue-cli项目建立，会有说明。
在安装以前咱们来介绍一下Vue-CLI:

• 经过 @vue/cli 搭建交互式的项目脚手架。
• 经过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。

• 一个运行时依赖 (@vue/cli-service)，该依赖：

  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 能够经过项目内的配置文件进行配置；
  • 能够经过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套彻底图形化的建立和管理 Vue.js 项目的用户界面

进入安装

安装Vue-cli3.0项目的命令的一些改变记录一下。打开Git Bash Here

• npm安装Vue-cli3.0或者cnpm安装Vue-cli3.0

$ npm install -g @vue/cli  # -g或者global 表示全局安装
#或者
$ cnpm install -g @vue/cli
#或者
$ yarn global add @vue/cli # 必须先安装yarn

• 注：yarn官方文档使用在这里，你们能够去试试yarn的使用

而以前的Vue-cli2.0是这样的

$ cnpm install --global vue-cli

安装完成以后查看版本信息

$ vue --version

基础

Vue-cli3.0进行单个原型开发

1.安装cli-service-global

$ npm install -g @vue/cli-service-global
#或者
$ cnpm install -g @vue/cli-service-global

2.必备有一个.vue文件，并且符合Vue模板样式就能够以下App.vue

<template>
  <h1>Hello! Welcome Leaning Vue-cli3.0</h1>
</template>

3.在App.vue这个目录中运行vue serve

$ vue serve

• 注：vue serve 使用了和 vue create 建立的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口能够是 main.js、index.js、App.vue 或 app.vue 中的一个,也就是说若是你建立的.vue文件是Hello.vue的话，那么你运行的应该是这样的

$ vue server Hello.vue # 必需要指定哪一个.vue文件

4.vue build 该文件,一样的状况，默认入口文件的main.js、index.js、App.vue 或 app.vue

$ vue build

若是不是则

$ vue build Hello.vue

建立项目

在Vue-cli 2建立项目是这样的

$ vue init webpack vuefirstdemo #这是基于webpack

而Vue-cli3的用法是create [options] <app-name>

$ vue create helloworld

提示选取一个 preset。你能够选默认的包含了基本的 Babel + ESLint 设置的 preset，能够手动选择，或者默认便可。

建立完成后，直接运行

$ cd helloworld
$ npm run serve

打包上线

$ npm run build

查看项目结构

• 项目结构注解：

|—node-modules：依赖的node库文件
|—public：公共文件，如index.html入口文件
|—src
    |—assets：资源文件img、css、html等等
    |—component：组件
    |—App.vue：vue的根组件
    |—main.js：主函数入口文件
|—package.json：项目描述文件

你也能够经过图形化界面管理和建立项目

$ vue ui

• 注：若是想恢复使用Vue-cli2.x的话能够这么来操做

$ npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
$ vue init webpack my-project

总结

好了，这里就完成了Vue-cli3的项目建立了，在IDEA开发工具建立，将会在下篇文章讲解，你们须要注意的是建立命令的改变了，其余项目结构没有多大的变化。

在前面我所讲的Vue-cli2项目建立你们能够去查看一下,总结他们的区别。

推荐

欢迎你们进入个人博客学习相关知识个人博客https://eirunye.github.io。