vue+node+webpack
来源:互联网 发布:网络商标查询 编辑:程序博客网 时间:2024/06/05 11:10
使用node+webpack
前提条件:node,npm已经安装好
安装Vue-Cli
npm i -g vue-cli
初始化项目目录
vue init webpack XXX(你想要项目的名字)
安装npm
cd XXX
npm install (这里建议使用淘宝镜像cnpm,不然墙外的东西……)
如果是新手就不要安装ESlint,要不然比较纠结,影响基情.
运行项目
在项目根目录下运行:npm run dev
这样基本结构就搭建起来了.
生成目录结构作用
下面所说不一定完全正确,请多多见谅
其实对弈一个项目来说,是由一个团队完成的,让整个团队成员明白整个项目整体框架是写代码前必须要做的,只有这样才不会出现乱七八糟,后期无法维护的情况.下面就vue-cli生成的目录结构做简单说明,我在这里没有选择生成test目录,当然在后期项目开发过程中可以新加其他目录方便管理整个个项目,例如一如工具类等
1.build: 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管。
2.config: 配置目录,默认配置没有问题,所以我们也不用管
3.node_modules: 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管
4.src: 我们的开发目录,基本上绝大多数工作都是在这里开展的
5.static: 资源目录,我们可以把一些图片啊,字体啊,公共js等放在这里。
6.test :初始测试目录
7..xxxx文件 这些是一些配置文件,包括语法配置,git配置等。基本不用管,放着就是了
8.index.html 首页入口文件,基本不用管,如果是开发移动端项目,可以在head区域加上你合适的meta头
9.package.json 项目配置文件。前期基本不用管,但是你可以找一下相关的资料,学习一下里面的各项配置。至少,要知道分别是干嘛的。初期就不管了。
10.README.md 不用管
开发基本动的就是src目录,我们再看看src相关目录
再这里引入了vue-router,所以生成router,components顾名思义就是组件,也就是vue思想的体现,组件化开发,在其下面放置各种组件,根据模块新建文件夹管理模块,router是路由,这儿体现的是vue的路由,和node的express模块下的router差不多,作用不太一样.具体用法后面有机会再说.
项目启动后代码是如何执行的
我们看几个关键的文件
####1. index.html是项目的入口,看看代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue_node_bootstrap</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body></html>
2.main.js
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App' //后期使用node.js进行改造成requireimport router from './router'//默认加载index.js,其他名字不行,如果要加载请使用全路径.Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app',//index.html下的id='app'的div router,//index.js的路由对象 template: '<App/>', components: { App }//组件App.vue})
3.App.vue
<template> <div id="app"> <img src="./assets/logo.png"> <router-view></router-view>//组件渲染的地方,必须有,否则无法渲染 </div></template><script>export default { name: 'app'}</script><style>#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>
4.index.js
import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'Vue.use(Router)export default new Router({ routes: [ { path: '/',//在访问根目录的时候会调用Hello组件渲染app.vue name: 'Hello', component: Hello } ]})
5.Hello.vue
<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li> <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li> <li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li> <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li> <br> <li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li> </ul> <h2>Ecosystem</h2> <ul> <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li> <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li> <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li> <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li> </ul> </div></template><script>export default { name: 'hello',//指定组件名称 data () { return { msg: 'Welcome to Your Vue.js App' } }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h1, h2 { font-weight: normal;}ul { list-style-type: none; padding: 0;}li { display: inline-block; margin: 0 10px;}a { color: #42b983;}</style>
这样在使用vue-router时,整个代码的执行流程就通了,如果想添加组件怎么办?
- vue+node+webpack
- vue+node+webpack搭建环境
- vue + webpack + node 开发一个小demo
- vue前端开发项目框架搭建(node+webpack+vue)
- Vue+webpack+node.js实现价格监测应用Ponitor
- Vue.js+webpack+node.js实现价格监测应用Ponitor
- vue-cli webpack在node环境下安装使用详解
- 从vue-cli中看node.js和webpack的运作
- Vue+Webpack+node构建web和App项目
- vue + webpack
- nodejs 升级后, vue+webpack 项目 node-sass 报错的解决方法
- webpack + vue.js + vue route
- vue-cli + webpack + vue-router
- vue+webpack学习记录
- vue-loader 与 webpack
- 用Webpack构建Vue
- webpack+vue起步
- vue+webpack项目实战
- css自动换行问题
- AES加密/解密算法 128bit、192bit、256bit秘钥 支持CBC 可直接在MCU上运行
- Server.MapPath()
- hive账单表算连续逾期以及累计逾期
- jquery 根据name属性查找元素
- vue+node+webpack
- 设计模式之适配器模式(六)
- vs2017 自带发布工具 ClickOnce发布包遇到的问题
- tensorboard在linux下的启动问题
- STL vector容器自己实现
- angular $location服务的配置
- 虚拟地址空间映射到物理地址空间
- 定时任务 quartz CronExpression 表达式
- 提示so文件找不到的错误