Vue2.0 第一步
1:打开控制台,利用脚手架工具来创建工程相关代码
Node需要4.0+
查看node需要命令node -v
安装vue-cli命令:npm install -g vue-cli,
完了再查看vue命令: vue
看到了常用的vue命令有:vue list(列出可用的模板)
谷歌一下就是:
所以模板我们选webpack
那么我们起名字叫labexam,用vue initwebpack labexam
之后可以选择要不要:--项目名称,项目描述,作者,是否用exlint风格检查器,选择一个模板(通常用标准的也就是standard),karma前端单元测试的库,(每行回车结束)
Ps:这是vue2.5.1的模板了
接着执行这个 ls能看到创建好的工程文件夹:我的就是labexam
进去看一看: cdlabexam和 ls 查看此目录下所有文件
接着用npminstall来下载在package.json包里面的依赖,会比较慢
终于下载好了,继续查看会多出来几个文件:node-module(依赖的东西 ) build(构建的东西) config
Src(生成好的放源代码的东西) static
好了,到这里就可以跑起来啦!
直接npm run dev (注意8080的端口不要被占用哦)
在浏览器输入:localhost:8080,显示如下
2:Vue2.0补充的插件有很多的,一个一个来
vue-router安装;
1:先在package加依赖(往后下载插件都是如此),键值对------''名称:版本'',版本去github上找
2:本来应该是在控制台写:npminstall vue-router
但是由于加了了依赖,node会自动查看依赖,所以直接输入npm install 回车等着显示安装成功就行啦
3:直接去node-module下面看这个vue-router的package.json文件,查看他的名字name,不然不知道怎么引用这个路由
这里就叫vue-router 所以在.vue文件或者.js文件引用的时候就是:
4:蛋疼的是vue还是不忍得这个router,还必须来一句
Vue.use(VueRouter)这才算注册插件
Stylus:
1:同理在devDependencies里面写:
"stylus": "^0.54.5",
"stylus-loader":"^2.4.0",
然后再npm install
,看node-module目录有没有这俩东西:
Vue-resource
Npm install
同样的,node-module也是有这个resource的
,还得引用然后注册:
好,完成啦!
顺便说一句:不要使用内置或保留的HTML元素作为组件id：header或者 head
因为header,head都是HTML5的元素了
所以我写成了这样:
最后样子:
下一步就是:
准备:reset.css(开发通用 样式);
bootstrap.min.css(好看的组件样式)
Common:stylus(项目通用的组件 样式如)