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.png

安装

说明

这里不介绍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版本.png

基础

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

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 serve 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]

$ vue create helloworld 

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

preset.png

vue create.png

创建完成.png

创建完成后，直接运行

$ cd helloworld
$ npm run serve

vue run.png

打包上线

$ npm run build

查看项目结构

项目结构.png

• 项目结构注解：

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

你也可以通过图形化界面管理和创建项目

$ vue ui

vue ui.png

vue ui mng.png

• 注：如果想恢复使用Vue-cli2.x的话可以这么来操作

$ npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected]` 相同
$ vue init webpack my-project

总结

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

在前面我所讲的Vue-cli2项目创建大家可以去查看一下,总结他们的区别。

推荐

欢迎大家进入我的博客学习相关知识我的博客https://eirunye.github.io。