Vue开发(一)—— 脚手架搭建项目及配置路由
一、使用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界面的数据了。
五、接下来开始我的第一个项目之旅了~~~(瞎做的)
效果图:
- Vue2项目架构搭建(八)—— vue-router2路由配置和调用
- MacBook Pro 下vue项目开发环境搭建,安装和配置apache
- vue脚手架搭建项目的兼容性配置详解
- vue开发:脚手架搭建的vue项目里引入jquery和bootstrap
- vue2.0 仿手机新闻站(二)项目结构搭建 及 路由配置
- 我们通过vue脚手架 搭建起来的项目 当项目跑起来 地址栏 始终有一个#
- vue.js学习02之vue-cli脚手架创建项目环境搭建
- Windows环境搭建VUE前端开发环境-项目新建与调试
- vue前端开发项目框架搭建(node+webpack+vue)
- 【23】使用vue-cli脚手架搭建webpack项目基本结构
- JAVA开发环境的搭建(配置JAVA开发环境)以及使用eclipse从头一步步创建java项目
- react项目实战(权限模块开发一) 配置路由
- vue实战笔记--搭建开发环境脚手架
- 解决vue脚手架项目打包后路由视图不显示的问题
- vue.js2.0实战:搭建开发环境及构建项目
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
- vue.js开发环境搭建以及脚手架工具安装
- 使用vue-cli脚手架搭建项目
- 从零搭建自己的Vue框架(2) —— 路由配置
- vue脚手架的搭建及对SPA(单页面开发)的理解