vue从入门到放弃
- 2018-4-5
- Web
哈哈,虽然标题是这样起的,但是Web工程化的好处可是大大的呀,方便项目的前期构建同时也有利于后期维护,所以还是尽早入坑吧~
1.使用vue-cli
脚手架创建一个vue项目
vue init webpack <项目名(可选)>
2.vue-cli
脚手架目录结构分析
3.vue
单文件组件
一个.vue
文件就是一个vue单文件组件,它由(HTML+JS+CSS)组成
4.安装stylus
支持
Step1 npm i stylus stylus-loader --save-dev
#npm安装stylus-loader
Step2 在.vue
组件中样式标记加上lang='stylus'
示例:
1 | <style scoped lang='stylus'> |
5.编写自己的组件并使用Route
渲染
Step1 在src/component
目录下新建一个MyCom.vue
组件文件并编写组件内容
Step2 写好组件内容后,修改route索引文件router/index.js
import
组件1
import MyCom from '@/components/MyCom'
将组件信息添加到路由列表中
示例:
1
2
3
4
5
6
7
8
9
10
11
12routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// },
{
path:'/',
name:'MyCom',
component:MyCom
}
]6.踩过的一些坑
1.
npm run dev
后,局域网内其他设备无法调试这个要慌,问题很大!尤其是你在进行移动Web开发的时候,还是真机调试比较靠谱。
解决方案: 修改
config/index.js
,将host:'localhost'
改成host:'0.0.0.0'