Vue JS安装部署与使用方法（保姆级教程）

Vue.js 安装

1、独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用

下载 Vue.js

---

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

• 字节跳动 CDN（国内） ：https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js
• Staticfile CDN（国内） : https://cdn.staticfile.net/vue/2.2.2/vue.min.js
• unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js。
• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

字节跳动 CDN（国内）

尝试一下 »

unpkg（推荐）

尝试一下 »

cdnjs

尝试一下 »

---

3、NPM 方法

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
$ npm -v
2.3.0#升级 npm
cnpm install npm -g# 升级或安装 cnpm
npm install cnpm -g

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装：

# 最新稳定版
$ cnpm install vue

---

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.For Vue 1.x use: vue init webpack#1.0 my-project? Project name my-project
? Project description A Vue.js project
? Author runoob <[e-mail]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yesvue-cli · Generated "my-project".To get started:cd my-projectnpm installnpm run devDocumentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run devDONE  Compiled successfully in 4388ms> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

**注意：**Vue.js 不支持 IE8 及其以下 IE 版本。

---

Vue 项目打包

打包 Vue 项目使用以下命令：

npm run build

执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。

如果直接双击 index.html 打开浏览器，页面可能是空白了，想要正常显示，可以修改 index.html 文件中 js、css 文件的路径。

例如我们打开 dist/index.html 文件看到路径是绝对路径：

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>

我们把 js、css 路径修改为相对路径：

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>

Vue AI 编程助手-VS Code

这两年 AI 发展迅猛，作为开发人员，我们总是追求更快、更高效的工作方式，AI 的出现可以说改变了很多人的编程方式

今天为大家推荐一款 VSCode 的插件 Fitten Code，Fitten Code 是由非十大模型驱动的 AI 编程助手，它可以自动生成代码，提升开发效率，帮您调试 Bug，节省您的时间，另外还可以对话聊天，解决您编程碰到的问题。

1、安装

如果您已经安装 VSCode 且版本大于等于1.68.0，请直接跳过此步骤，否则请点击下载前往官网下载安装 VSCode。

打开 VSCode，点击左侧 Extensions（扩展）按钮：

在搜索框中搜索关键字 Fitten Code：

在搜索结果中点击安装：

登录注册后即可开始使用：

2、智能补全

打开代码文件，输入一段代码，Fitten Code 就会为您自动补全代码：

按下 tab 键接受所有补全建议：

按下 ctrl+→ 键(mac系统为command+→)接收单个词补全建议：

3、AI 问答

用户可通过点击左上角工具栏中的Fitten Code – 开始对话或者使用快捷键Ctrl+Alt+C(mac系统为control+option+C)打开对话窗口进行对话：

当用户选中代码段再进行对话时，Fitten Code 会自动引用用户所选中的代码段，此时可直接针对该代码段进行问询等操作：

4、生成代码

可在左侧 Fitten Code 工具栏中选择 “Fitten Code - 生成代码” 或者使用快捷键 Ctrl+Alt+G (mac系统为control+option+G)，如下图所示：

然后在输入框中输入指令即可生成代码：

实现效果：

利用对话功能生成代码：

实现效果：

5、代码翻译

编辑代码功能可以实现不同语言之间的转换，如HTML语法转换成Vue语法等。选中需要进行编辑的代码段，右键选择 “Fitten Code – 编辑代码” 或点击左侧工具栏中的 “Fitten Code – 编辑代码” 或者使用快捷键 Ctrl+Alt+E (mac系统为control+option+E)，如下图中所示：

然后在输入框中输入需求(如此处要求Fitten将HTML+CSS+JavaScript代码转为Vue组件)：

效果展示：左为html页面，右为转换为Vue语法渲染后的页面

也可以在Chat界面实现：选中需要进行编辑的代码段，右键选择 “Fitten Code – 开始聊天” 或点击左侧工具栏中的 “Fitten Code – 开始聊天” 或者使用快捷键 Ctrl+Alt+C, 如下图中所示：

然后在输入框输入需求：

6、生成注释

Fitten Code 能够根据您的代码自动生成相关注释，通过分析您的代码逻辑和结构，为您的代码提供清晰易懂的解释和文档，不仅提高代码的可读性，还方便其他开发人员理解和使用您的代码。先选中需要生成注释的代码段，然后右键选择 “Fitten Code – 生成注释”：

即可生成对应注释如下图所示，点击"Apply"后即可应用：

7、解释代码

Fitten Code 可以对一段代码进行解释，可以通过选中代码段然后右键选择 “Fitten Code – 解释代码” 进行解释，如下图所示：

Fitten Code 会逐步对框选代码进行解释，如下图所示：

此外，还可以进一步回答用户关于这段代码的疑问，如下图所示：

8、生成测试

Fitten Code 拥有自动生成单元测试的功能，可以根据代码自动产生相应的测试用例，提高代码质量和可靠性。通过选中代码段后右键选择 “Fitten Code – 生成单元测试” 来实现，如下图所示：

Fitten Code 生成的单元测试，如下图所示：

9、检查 BUG

Fitten Code 可以对一段代码检查可能的 bug，并给出修复建议。选中对应代码段，然后右键选择 “Fitten Code查找Bug”，如下图所示：

10、编辑代码

Fitten Code可根据用户指示对选定的代码块进行编辑，用户点击 “Apply” 后即可应用变更。通过选中代码段右键选择 “Fitten Code – 编辑代码” 或在左上角工具栏点击 “Fitten Code – 编辑代码”，如下图所示：

随后，用户可在输入框中输入指示，Fitten Code 会新建一个窗口对比显示更改前和更改后的内容，用户可通过点击 “Apply” 应用更改，如下图所示：

11、优化代码

Fitten Code 可以对一段代码进行代码优化，并给出优化点。选中对应代码段，然后右键选择 “Fitten Code 优化代码”，如下图所示：

Fitten Code给出的优化代码和优化点供用户参考，如下图所示：

12、整项目分析

Fitten Code 的整项目感知分析功能，该功能会基于整个项目来解答你的问题，用户只需在对话框中以 @workspace 开头，接着输入想要提问的问题即可。如下图所示：

某用户的项目，如下图所示：

功能效果展示，Fitten Code 会将文件拆成多个部分进行分析和引用，用户点击展开workspace参考点击引用信息：便可看到引用详情，如下图所示：

13、整项目补全

Fitten Code 的整项目感知补全功能，实现了可以在用户编写代码时分析用户的整个项目给出补全建议，而不只是单纯的对于基于单个文件给出补全建议。

首先需要打开这个功能。

效果展示

需要被引用的类(不在需要补全的文件中)如下图所示：

Fitten Code 的整项目感知补全功能，能够获取到不在当前文件的类并给出补全建议，如下图所示：

14、图片问答

Fitten Code 的图片问答功能，为用户实现了可以在对话时使用图像问答的功能，用户可通过图像快速生成HTML代码、也可以通过图像查找bug等等。

用户上传了一张描述登录页面设计的图像，并询问如何使用HTML复刻此网页。

Fitten Code 分析图像并且根据分析结果，生成相应的HTML代码。

用户上传了一张色调板的图像，并询问如何使用HTML制作类似色调的个人介绍页面。

Fitten Code生成的个人介绍网页效果，可以看到该网页色调与输入的图像色调一致。

用户上传了一张贪吃蛇游戏的截图，并询问如何用代码实现该游戏设计。

用户上传了一张包含红色波浪线的网页截图，并询问这条红色波浪线表示什么问题和解决方法。

15、常见问题

如果 VSCode 远程服务器 remote 无法连接外网时，请点击左下角⚙按钮，再点击设置：

然后在设置页面点击右上角 "打开设置(JSON)":

最后只需在在弹出的 settings.json 文件中添加以下内容即可:

"remote.extensionKind": { "FittenTech.Fitten-Code": ["ui"] }

Vue.js 目录结构

上一章节中我们使用了 npm 安装项目，我们在 IDE（Eclipse、Atom等） 中打开该目录，结构如下所示：

目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。
static	静态资源目录，如图片、字体等。
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等。
index.html	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	项目配置文件。
README.md	项目的说明文档，markdown 格式

在前面我们打开 APP.vue 文件，代码如下（解释在注释中）：

src/APP.vue

<!-- 展示模板 -->
<template><div id="app"><img src="./assets/logo.png"><hello></hello></div>
</template><script>
// 导入组件
import Hello from './components/Hello'export default {name: 'app',components: {Hello}
}
</script>
<!-- 样式代码 -->
<style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

接下来我们可以尝试修改下初始化的项目，将 Hello.vue 修改为以下代码：

src/components/Hello.vue

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'hello',data () {return {msg: '欢迎加入guowes代码库！'}}
}
</script>
ans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

接下来我们可以尝试修改下初始化的项目，将 Hello.vue 修改为以下代码：

src/components/Hello.vue

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'hello',data () {return {msg: '欢迎加入guowes代码库！'}}
}
</script>

重新打开页面 http://localhost:8080/，一般修改后会自动刷新，不在展示图片了