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 

而之前的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

<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 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] <app-name>

$ 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` 的运行效果将会跟 `vue-cli@2.x` 相同
$ vue init webpack my-project

总结

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

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

推荐

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 128,621评论 19 550
  • 汪涵属于主持界里温文尔雅的代表,而真正让我成为迷妹,是因为看了2015年《我是歌手》的直播事故:决赛中途,孙楠突然...
    饭小艺阅读 193评论 4 10
  • 我的祖国 我的祖国在东方, 盘古开天又辟地, 女娲娘娘在补天 上下五千年的魂。 始于夏朝终于清, 历代君主霸天下,...
    HC妹妹阅读 27评论 0 0
  • 正正因为非常相信宇宙粑粑,相信吸引力法则,恰恰地,宇宙粑粑一个早上给我看了3篇文章。 一篇是如何使用excel程序...
    辜美慧的六中玩换阅读 48评论 0 0
  • 我要习惯不能想着你,习惯你被人搂在怀里,习惯不能去偷偷看你,直到有一天,忘了你,我这人,唉,,就是这么纠结
    不该奢求阅读 38评论 0 0