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项目创建_第1张图片
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,可以手动选择,或者默认即可。

Vue-cli3.0项目创建_第2张图片
preset.png
Vue-cli3.0项目创建_第3张图片
vue create.png
Vue-cli3.0项目创建_第4张图片
创建完成.png

创建完成后,直接运行

$ cd helloworld
$ npm run serve
Vue-cli3.0项目创建_第5张图片
vue run.png

打包上线

$ npm run build

查看项目结构

Vue-cli3.0项目创建_第6张图片
项目结构.png
  • 项目结构注解:
|—node-modules:依赖的node库文件
|—public:公共文件,如index.html入口文件
|—src
    |—assets:资源文件img、css、html等等
    |—component:组件
    |—App.vue:vue的根组件
    |—main.js:主函数入口文件
|—package.json:项目描述文件

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

$ vue ui
Vue-cli3.0项目创建_第7张图片
vue ui.png
Vue-cli3.0项目创建_第8张图片
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

你可能感兴趣的:(Vue-cli3.0项目创建)