为了账号安全,请及时绑定邮箱和手机立即绑定

Vue-cli3.0项目创建

2018.10.17 21:22 938浏览

简介

之前写过一篇文章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 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,可以手动选择,或者默认即可。

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项目创建大家可以去查看一下,总结他们的区别。



作者:eirunye
链接:https://www.jianshu.com/p/e104372ed980


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消