how2j.cn

步骤 1 : vue-cli 概念   
步骤 2 : 准备项目目录   
步骤 3 : 安装 vue-cli   
步骤 4 : 查看版本   
步骤 5 : 原型工具   
步骤 6 : test.vue   
步骤 7 : 运行命令   
步骤 8 : 打开测试地址   
步骤 9 : 关于 vue 文件   
步骤 10 : test.vue   
步骤 11 : 重新运行   
步骤 12 : 创建项目   
步骤 13 : 运行项目   
步骤 14 : 访问测试地址   
步骤 15 : vue-cli 缺点   

步骤 1 :

vue-cli 概念

什么是 vue-cli 呢?
vue-cli 是 vue 出来的一个脚手架,可以进行 组件式地开发。
但是要运用 vue-cli , 必须要有 node.js 和 webpack 的基础,否则里面很多命令既运行不了,也无法理解。
所以没有 node.js 和 webpack 基础的同学, 请先学习这两门课程:
node.js 入门教程
webpack 入门教程
步骤 2 :

准备项目目录

准备目录

E:\project\vue-cli
准备项目目录
步骤 3 :

安装 vue-cli

vue-cli 截止目前是出到3了。 接下来的教程都是以3为基础做的。

安装命令:

npm install -g @vue/cli@3.0.1

注意,这个版本号一定要跟,如果不跟,那么就是安装vue-cli 的最新版本。 目前 (2018-08-19) 其最新版本是 3.0.1。 但是如果过几个月,你才看到这个教程的话,说不定 vue-cli 的版本就是 4.0了。 而不同版本的做法区别很多,本教程是基于 3.0.1 做的,所以安装的时候一定要加上 3.0.1 ,否则错版本的教程就没有意义了。

如图所示就是安装好了。 其中了几个警告,是针对 mac 操作系统的,我们用的是 windows 可以不管它。
安装 vue-cli
步骤 4 :

查看版本

安装成功之后,可以通过如下命令查看版本

vue --version

当前版本是 3.0.1
查看版本
步骤 5 :

原型工具

vue-cli 提供了一个很方便的原型工具,按照如下方式安装

npm install -g @vue/cli-service-global@3.0.1
原型工具
步骤 6 :

test.vue

在项目下新建一个 test.vue 文件,然后用随便什么编辑器在里面输入如下内容。
运行效果
<template> <h1>Hello Vue-Cli</h1> </template>
<template>
  <h1>Hello Vue-Cli</h1>
</template>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 7 :

运行命令

然后运行命令

vue serve test.vue

就会提示,让打开如下 URL 进行测试:

http://localhost:8081/
运行命令
步骤 8 :

打开测试地址

打开测试地址就会看到如图所示。。。 这就表示 vue 跑起来了~

http://localhost:8081/
打开测试地址
步骤 9 :

关于 vue 文件

回顾前面学习的组件知识: vue.js 组件, 虽然 vue 可以通过 组件的方式重复使用很多代码,但是 <component> 方式有一些缺陷:
1. 组件用 '' 方式写,如果比较复杂,写起来麻烦
2. 组件里 不包含 js
3. 组件里不包含 css
而用 vue 就可以化解这个问题。
下个步骤把 test.vue改造一下。
步骤 10 :

test.vue

把 test.vue改造一下。
html部分放在 <template> 标签里
提供数据部分放在 <script> 里
样式部分放在 <style> 里

这就是一个可以有比较完整功能的组件了
运行效果
<template> <p>{{greeting}} Vue-Cli</p> </template> <script> export default { data () { return { greeting: 'Hi' } } } </script> <style scoped> p{ font-size: 2em; text-align:center; color:blue; } </style>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 11 :

重新运行

再运行命令

vue serve test.vue

然后在测试地址观察

http://localhost:8081/

可以看到如图所示的效果
重新运行
步骤 12 :

创建项目

刚才的例子是仅仅基于 test.vue 这么一个单个文件。
接下来,通过 vue-cli 创建一个项目

vue create hello-world
创建项目
步骤 13 :

运行项目

创建好之后,执行如下命令运行项目

cd hello-world
npm run serve
运行项目
步骤 14 :

访问测试地址

访问测试地址:

http://localhost:8081/

如图所示,这就启动了一个 vue 项目, 其实就是启动了 main.js 文件

E:\project\vue-cli\hello-world\src\main.js

间接得加载了 App.vue,然后又间接地加载了 components/HelloWorld.vue 文件。
HelloWorld.vue文件里,就是上面这些 html 超链了。。。

那么为什么启动了 main.js 就可以把这些都搞进来呢? 那么就是用到了教程一开头说到了 webpack 了。 不明白这个的同学请学习:
webpack 入门教程
访问测试地址
步骤 15 :

vue-cli 缺点

vue-cli ,单页应用 SPA(single page application) 开发的时候是很方便的,但是多页复杂系统的话用起来就比较麻烦了。
并不是 vue-cli 不支持 多页系统, 而是为了让 vue-cli 支持多页系统,需要额外装很多插件和工具,用起来就相当的麻烦。。。


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


提问之前请登陆
关于 前端部分-Vue.js-vue-cli 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图