如何快速上手vue框架

如何快速上手vue框架

• 需要拥有的基础
• 使用的软件
• 项目下载
• 使用框架

需要拥有的基础

使用vue框架首先需要有HTML、CSS、JavaScript、vue的基础知识作为支撑。

使用的软件

我使用的是vscode，下载vscode后需要安装一些学习前端必要的插件。

1. Chinese ，用于汉化
2. npm ，npm
3. npm Intellisense ，npm 模块导入插件；
4. TML Snippets ， 智能提示HTML标签，以及标签含义；
5. HTML CSS Support ， 智能提示CSS类名以及id；
6. IntelliSense for CSS class names in HTML HTML中CSS类名的智能感知
7. JavaScript(ES6) code snippets ， ES6语法智能提示；
8. jQuery Code Snippets， jQuery代码智能提示；
9. Bracket Pair Colorizer， 给括号加上不同的颜色，便于区分不同的区块；
10. Auto Close Tag ， 自动闭合HTML/XML标签；
11. Auto Rename Tag ， 自动完成另一侧标签的同步修改；
12. open in browser ，支持右键打开文件；
13. Path Intellisense ， 自动提示路径；
14. Beautify ，自动美化代码；
15. Material Icon Theme ， 图标主题扩展包；
16. Vetur Vue多功能集成插件；
17. Vue 2 Snippets ，vue2代码提示；
18. vscode-fileheader ，自动添加文件头部描述信息；

项目下载

链接：https://www.iviewui.com/docs/guide/start
1、在页面中找到 使用推荐工程 中推荐工程后的网址
2、打开页面后点击中间右侧绿色的clone or download 并且 点击右下角的download zip
3、在vscode中打开下载好的文件夹，注意：打开的文件夹一定是以下图片形式的，如果在上一级文件夹是打不开的
4、打开后在vscode导航栏的终端 点击后选择新建终端，在左侧资源管理器打开README

依次运行npm install，npm run init，npm run dev，在运行npm run init时如果报错，
把 webpack.dev.config.js 里的

fs.write(fd, buf, 0, buf.length, 0, function (err, written, buffer){});

替换成

fs.write(fd, buf, function(err, written, buffer) {});

替换后再运行npm run dev。

使用框架

链接：https://www.iviewui.com/components/layout
1、打开网址，找一个自己喜欢的布局。
2、在vscode中操作好上面的项目下载后，在vscode中打开src中的views中的index.vue 注意，不是app.vue
3、将选好的布局代码复制到index.vue中，找到自己需要添加修改的内容部分进行修改即可。
例如找到content主体内容部分，在里面添加组件就可以了。

<div style="min-height: 200px;">
Content
</div>

4、配置路由：找到router.js，打开在里面添加路由就可以了

• 点赞
• 收藏
• 分享
• 文章举报