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` 的运行效果将会跟 `[email protected]` 相同 $ vue init webpack my-project
总结
好了，这里就完成了Vue-cli3的项目创建了，在IDEA开发工具创建，将会在下篇文章讲解，大家需要注意的是创建命令的改变了，其他项目结构没有多大的变化。
在前面我所讲的Vue-cli2项目创建大家可以去查看一下,总结他们的区别。
推荐
欢迎大家进入我的博客学习相关知识我的博客https://eirunye.github.io。