利用vue-cli搭建项目

每次学会后总会忘记,特记下来,方便日后查阅,本文前提是在vue环境都搭建好的前提下进行的。环境搭建好以后,再次想构建项目需要执行以下操作

一,关于开启新项目

1,在桌面打开命令行窗口vue init webpack xxx(项目名字)

第一步操作


后面一直回车即可


2,然后cd xxx(项目名称)进入文件夹


3,cnpm i


4,npm run dev


5,打开8081端口


页面效果


项目目录

二,关于路由跳转

我们搭建项目要写的内容都在src目录下,路由都在router目录下的index.js文件里配置。

要引入的文件是在main.js里配置,比如要使用element ui 则在main.js里引入

如何路由跳转?

1,在components下新建一个vue文件 first.vue



2,然后配置index.js


3,在helloworld里加跳转


三,关于vue-resource

在项目文件里打开命令行输入 cnpm install vue-resource


执行完后在main.js里配置

import VueResource from 'vue-resource'

Vue.use(VueResource)


resource的使用

helloworld页面


html


js


页面输出

mint-ui 使用

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容