2、使用 vue-cli 初始化项目在硬盘新建工程文件夹,在终端中使用 cd 命令进入该目录
- cnpm install vue-cli -g
使用 webpack 打包项目,输入项目名称、描述、作者、是否使用 sass 后即在目录下面生成了项目。文件树结构如下:
- cd 目录路径
- vue init webpack-simple first-vue
3、安装项目依赖进入项目目录后使用 npm 或者 cnpm(淘宝镜像 )安装。
- ├─src// 开发目录│ ├─assets// 资源文件目录,需要打包的放到该目录下
- │ │ ├─logo.png │
- │ ├─App.vue // App.vue组件│ ├─main.js// 预编译入口├─.babelrc// babel配置文件
- ├─.gitignore
- ├─index.html // 主页├─package.json// 项目配置文件
- ├─README.md
- ├─webpack.config.js // webpack配置文件
4、启动项目由于 vue.js 不支持 ie8,建议默认浏览器使用 chrome,自动启动浏览器就会看到这个界面了。
- cd first-vue
- npm install
5、发布项目执行以下命令会生成发布时的 build.js,并且是经过压缩的。
- npm run dev
这时候会在目录下生成 dist 文件夹和相关发布后的文件,由于使用的是 webpack-simple 方式打包,不会生成 index.html 文件,特别要注意的是 index.html 加上 dist 不能采用 file 协议打开,必须使用 http 协议打开,并且需要放在 http 服务的 / 目录下。拷贝 index.html 到 dist 文件文件夹并放在本地 IIS 目录下,这样就能访问了。(关于 webpack 的详细使用,建议学习专门的教程,打包的配置文件在 webpack.conifg.js 里面,这里暂时只要知道这样用就行了) 四、给项目添加组件通过前面的步骤,已经在本地跑起了一个简单的项目,但这个项目还太简单了,现在给它加点新的功能。组件系统是 Vue.js 其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树,例如常用的顶部条,底部菜单都就抽象成组件使用。 1、添加文件。在 src 目录下新建 components 目录,添加 first-component.vue,template 写 html,script 写 js,style 写样式
- npm run build
2、引入。打开 App.vue,引入 firstcomponent 组件,并删除 vue-cli 脚手架生成的一些无意义 html。在标签内的第一行写
- export default {
- data () {
- return {
- author: "ling"
- }
- }
- }
3、注册。在标签内的 data 代码块后面加上 components: {firstcomponent}。记得中间加英文逗号
- <import firstcomponent from './components/firstcomponent.vue'>
4、使用。在内加上
- export
- default {name:
- 'app',
- data() {
- return {msg: 'Welcome to Your Vue.js App'
- }
- },
- components: {
- firstcomponent
- }
- }
完成后的代码: 在浏览器上打开 http://localhost:8080/ 页面 (之前打开过就会自动刷新),这样就成功在项目中添加了一个组件。 五、使用 vue-router 2 给项目添加路由功能实际项目中,由于不同模块的划分,需要路由功能,使用 vue-router 为项目添加路由。注意: vue-router@2.x 只适用于 Vue 2.x 版本。 1、终端安装 vue-router。
- <template>
- <div id="app">
- <img src="./assets/logo.png">
- <h2>
- {{msg}}
- </h2>
- <firstcomponent>
- </firstcomponent>
- </div>
- </template>
注意参数 --save--save 可以理解成生产环境,会把依赖包名称添加到 package.json 文件 dependencies 键下,dependencies 是运行时依赖。--save-dev 则是开发环境, 添加到 package.json 文件 devDependencies 键下,devDependencies 是开发时的依赖,如生产时不需要用到压缩库应该安装到 devDependencies 。 2、src 下添加 views 目录和页面文件。在目录下面新建两个文件,view1.vue 和 view2.vue。
- cnpm install vue-router --save
- export default {
- name: 'view1',
- }
3、引入并注册 vue-router。添加 router.js 文件,这里添加了两个路由,分别指向 view1 和 view2。
- export default {
- name: 'view2',
- }
至此,目录结构如此 4、使用 router。修改 main.js,引入 router 并指定当前 vue 实例
- import Vue from 'vue'
- import Router from 'vue-router'
- import View1 from './views/view1.vue'
- import View2 from './views/view2.vue'
- Vue.use(Router)
- export default new Router({
- linkActiveClass: 'active',
- // 路由配置
- routes: [
- {
- path: '/view1',
- component: View1
- }, {
- path: '/view2',
- component: View2
- }, {
- path: '/*',
- component: View1
- }
- ]
- })
5、添加路由链接和出口。修改 App.vue,添加链接和出口。
- import Vue from 'vue'
- import App from './App.vue'
- import router from './router.js'new Vue({
- el: '#app',
- router,
- render: h => h(App)
- })
查看网站,点击 Go to view1 和 Go to view2,浏览器地址发生了改变,同时 view1 和 view2 的内容也渲染在了 router-view 六、使用 axios 请求数据至此,我们的项目实现了路由功能,但这些页面的数据都是静态的,下面我们使用 axios 库来请求动态数据并展示出来。vue 更新到 2.0 之后, 作者就宣告不再对 vue-resource 更新, 而是推荐的 axios。 1、终端安装 axios
- <router-link to="/view1">
- Go to view1
- </router-link>
- <router-link to="/view2">
- Go to view2
- </router-link>
- <!-- 路由出口 -->
- <!-- 路由匹配到的组件将渲染在这里 -->
- <router-view>
- </router-view>
2、引入 axios。修改 main.js 文件,添加 Vue.prototype.$ajax = axios ,引入 axios。
- cnpm install axios --save
3、在视图中请求数据。修改 view1.vue 的 js,引入 axios,请求服务器数据。
- import Vue from 'vue'
- import axios from 'axios'
- import App from './App.vue'
- import router from './router.js'
- Vue.prototype.$ajax = axios
- new Vue({
- el: '#app',
- router,
- render: h => h(App)
- })
由于 axios 不支持跨域的 jsonp 请求,这里笔者使用本地 webapi 项目的接口数据进行测试,发布后拷贝到 iis 目录中,如图可以看到成功请求到了数据。 七、更多的 Vue.js 至此,我们已经搭建了 Vue.js 开发环境并使用发布了一个功能简单但罗完整项目,一些不太复杂的项目基本可以按步骤来实现。推荐一些优秀的 vue.js 库来构建更复杂的工程。Vuex:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。vue-lazyload:vue-lazyload 一个简单易用的 Vue 图片延迟加载插件 。Element:一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。官网:http://element.eleme.io/#/en-US,github:https://github.com/ElemeFE/element。更多实用的 vue.js 库:http://www.cnblogs.com/huyong/p/6517949.html。 本文代码已上传至 github:https://github.com/dreling8/vuejs-demo 参考:https://www.zhihu.com/question/37984203http://www.runoob.com/w3cnote/vue2-start-coding.htmlhttps://www.zhihu.com/question/38213423https://www.v2ex.com/t/249859
- import axios from 'axios'
- export default {
- name: 'view1',
- mounted: function() {
- axios.post('/jhb/getslides')
- .then(function (response) {
- console.log(response);
- })
- .catch(function (response) {
- console.log(response);
- });
- }
- }
来源: http://www.cnblogs.com/dreling/p/6892684.html