您的位置:首页 > Web前端 > Vue.js

Vue开发(一)—— 脚手架搭建项目及配置路由

2018-11-05 17:41 976 查看

一、使用vue-cli搭建项目

1、安装cnpm :$ npm install -g cnpm --registry=https://registry.npm.taobao.org
2、vue-cli全局安装:cnpm install -g vue-cli
3、用脚手架搭建一个基于webpack的新项目:vue init webpack 项目名字
4、打开项目: cd 项目名字
安装依赖:cnpm install(这次安装的时候发现这一步不用走)
运行项目:npm run dev

(如果想自动打开浏览器,可以找到config/index.js中修改 autoOpenBrowser: true即可)

二、文件路径解析(这里参考简书文章:https://www.jianshu.com/p/f5804394819c

├── build/ # 项目打包配置文件 vue-cli 初始化的文件
├── node_modules/ #模块文件
├── config/ #配置文件 vue-cli 初始化的配置
├── dist/ #打包后的文件存放目录
├── src/ #项目入口目录
── ├── assets/ # 前端资源目录,比如less文件
── ├── components/ # vue公共组件
── ├── router/ # vue路由管理目录
──── ├── index.js # 路由主文件
── ├── store/ # vuex的状态管理
── ├── App.vue # 页面入口文件(根组件)
── ├── main.js # 项目入口文件,加载各种公共组件
├── static/ 静态文件,比如一些图片,json数据等
├── test/ #测试目录
├── package.json #包文件信息
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore # git上传需要忽略的文件格式
├── .postcsssrc.js
├── index.html # 入口页面
├── README.md
三、配置路由
1、配置:
两种配置方法:在main.js中 || 在src/router文件夹下的index.js中

2、 引入及注册:(index.js为例)

3、 文件位置:src/router/index.js

4、路由的嵌套使用:
就是点击跳转的时候不跳转到新的新的页面,而是像tab切换一样:只在当前页面切换着显示
还有就是如果遇到有子路由的时候最好把结构单独拿出来,然后做成一个组件,再引到里面。

5、注意:
配置路由index.js的时候:component是单数
在具体使用到组件时候,也就是局部注册组件这里,可能会定义多个组件,所以component这个单词加上“s”。

四、安装vue调试工具vue-devtools
安装的方法:(以chrome为例,我最喜欢 ❤方法1❤)
1、在chrome应用商店直接下载

1)打开应用商店,搜索“vue-devtools”,选择第一个,点击“添加至chrome”,即可

2)添加成功,会弹出一个“Vue.js devtools”已添加至chrome;同时浏览器右上角会显示一个vue的图标标志

同时,可以在 浏览器的更多工具=>扩展程序里面查看到自己所有的扩展程序

2、下载压缩包
如果你打不开应用商店,这种情况你可以直接下载安装包,然后拖到chrome拓展栏中(更多工具=>拓展程序),并打开右上角的 开发者模式(记得勾选允许访问文件网址)。
github下载地址:https://github.com/vuejs/vue-devtools

注意:
安装完如果发现vue图标是灰色的(“点击会显示vue.js is not detected”),不用重新安装。
这是因为对于没有应用vue框架的页面,是检测不到vue.js的。
切换到有vue.js资源的页面,vue图标会变为高亮,调试界面就会自动检测出vue插件,在控制台就可以看到自己的vue界面的数据了。

五、接下来开始我的第一个项目之旅了~~~(瞎做的)

效果图:

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: