|
|
|
|
步骤 2 : 准备项目目录 步骤 3 : 安装 vue-cli 步骤 4 : 查看版本 步骤 5 : 原型工具 步骤 6 : test.vue 步骤 7 : 运行命令 步骤 8 : 打开测试地址 步骤 9 : 关于 vue 文件 步骤 10 : test.vue 步骤 11 : 重新运行 步骤 12 : 创建项目 步骤 13 : 运行项目 步骤 14 : 访问测试地址 步骤 15 : vue-cli 缺点
什么是 vue-cli 呢？
vue-cli 是 vue 出来的一个脚手架，可以进行 组件式地开发。 但是要运用 vue-cli , 必须要有 node.js 和 webpack 的基础，否则里面很多命令既运行不了，也无法理解。 所以没有 node.js 和 webpack 基础的同学， 请先学习这两门课程： node.js 入门教程 webpack 入门教程
准备目录
E:\project\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 --version 当前版本是 3.0.1
vue-cli 提供了一个很方便的原型工具，按照如下方式安装
npm install -g @vue/cli-service-global@3.0.1
在项目下新建一个 test.vue 文件，然后用随便什么编辑器在里面输入如下内容。
<template>
<h1>Hello Vue-Cli</h1>
</template>
<template> <h1>Hello Vue-Cli</h1> </template>
然后运行命令
vue serve test.vue 就会提示，让打开如下 URL 进行测试： http://localhost:8081/
打开测试地址就会看到如图所示。。。 这就表示 vue 跑起来了~
http://localhost:8081/
回顾前面学习的组件知识： vue.js 组件， 虽然 vue 可以通过 组件的方式重复使用很多代码，但是 <component> 方式有一些缺陷：
1. 组件用 '' 方式写，如果比较复杂，写起来麻烦 2. 组件里 不包含 js 3. 组件里不包含 css 而用 vue 就可以化解这个问题。 下个步骤把 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>
再运行命令
vue serve test.vue 然后在测试地址观察 http://localhost:8081/ 可以看到如图所示的效果
刚才的例子是仅仅基于 test.vue 这么一个单个文件。
接下来，通过 vue-cli 创建一个项目 vue create hello-world
创建好之后，执行如下命令运行项目
cd hello-world npm run serve
访问测试地址：
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 入门教程
vue-cli ，单页应用 SPA(single page application) 开发的时候是很方便的，但是多页复杂系统的话用起来就比较麻烦了。
并不是 vue-cli 不支持 多页系统， 而是为了让 vue-cli 支持多页系统，需要额外装很多插件和工具，用起来就相当的麻烦。。。
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2023-09-13
步骤七运行错误解决
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-03-30
vue4版本亲测可行
2019-10-28
vue create hello-world不能正确生成
2019-06-30
执行vue serve test.vue指令，localhost:8080页面可以打开，但test.vue中的template没有加载到浏览器中
2019-05-17
vue 讲的不是很详细
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 1 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
