vue-cli

Vue-cli 项目结构简介 这篇来大致的介绍一下整个项目的目录。 首先来看一下整个结构目录 接下来从上到下的看一下每个文件以及文件是干嘛的 build 文件夹 及 子目录 这里面是一些webpack的配置，主要用于项目打包时的一些设置。这里不去更详细的深入，相关的文件及配置会在后面用到时在详细的介绍。 config 文件 及 子目录 这个文件夹里装的是整个项目 开发运行时的一些配置，比如npm run dev 时 项目的启动端口 之类的 。 node_modules 文件 及 子目录 这个文件夹里面全部都是node的一些基础的依赖包，当我们拓展的安装一些别的插件时 也会装在这个文件夹里。 src 文件 及 子目录 这个文件夹 是 整个项目的主文件夹 ， 我们的代码大部分都在这里完成。来具体的看一下里面的内容： assets 文件夹里面主要放置一些资源文件。比如js 、css 之类的文件。 components 文件夹可以说是vue 的 灵魂了 ， 组件文件全部都可以放到这里面。 组件 ！一个vue项目就是由一个个的组件拼装起来的。 router 文件夹 及 子目录 这个文件夹里的是整个vue项目的路由，vue 是单页面应用的代表，这里面就是设置一个一个组件的地址的文件。 app 文件 这个文件是整个项目的入口文件，相当于包裹整个页面的最外层的div。 main.js 文件

https://www.cnblogs.com/sweeeper/p/8652539.html node+vue-cli+webpack搭建教程 链接：https://segmentfault.com/a/1190000009160934?_ea=1849098 链接：https://www.jianshu.com/p/2769efeaa10a 链接：https://jinkey.ai/post/tech/vue2.0-xin-shou-wan-quan-tian-keng-gong-lue-cong-huan-jing-da-jian-dao-fa-bu 仅仅使用vue然后用webpack进行打包放到服务器的例子，webpeck就是打包发布的，打包后放在dist（distribution的缩写）文件夹下：https://segmentfault.com/a/1190000008722404 Jinkey Intelligence October 10, 2016 JavaScript Vue2.0 新手完全填坑攻略——从环境搭建到发布 Vue2 入门，读这篇就够了 Jinkey原创 感谢 showonne 、 yubang 技术指导 Demo 地址: http://demo.jinkey.io/vue2 源码: https://github.com/Jinkeycode/vue2

vue-cli脚手架使用 runtime-only 和 runtime + compiler 的两种选择 　　runtime-only编译过程：render -> Virtual DOM -> UI 　　runtime + compiler 编译过程： template -> AST(抽象语法树) -> render -> Virtual DOM -> UI 它俩的区别就在于一个有编译过程，一个无编译过程，所以runtme-only的代码量少，体积更小 　　脚手架初始化时webpack会安装一些loader和plugin,其中就有vue-loader和vue-template-compiler。vue-loader作用是导入.vue文件，也就是将一些组件导入,而vue-template-compiler的作用是将.vue文件进行编译，从而将它编译成不包含模板。 　　所以runtime-compiler和runtime-only使用.vue文件最终编译的都是不带模板的，都可以直接用render函数到虚拟DOM到UI。可能唯一的区别在于，runtime-compiler可以在像main.js这样的文件中直接用对象创建一个组件，然后用render函数或者components注册渲染到UI上，而runtime-only没有编译过程不能这么干，只能用.vue文件组件化开发。 来源：

写在前面 这是好久之前遇到的问题了，一直没有时间记录下来，总是去Google,现在幸得于空，赶紧记录下来，把之前的问题回想一边，有利于加深理解。也方便自己查看以及帮助到简友。有什么不对的地方，还希望多多评论指出。 首先兼容ie只需要安装一个插件就好了 npm install babel-polyfill --save-dev 使用方法,打开项目build文件夹下的 webpack.base.conf.js 文件，在里边配置如下 module . exports = { entry : { app : [ 'babel-polyfill' , './src/main.js' ] } , } 然后再main.js中引入就好了 import 'babel-polyfill' 这样就可以解决兼容性问题了，但是这样并没有兼容axios的请求以及一些api,例如：- Pormise 解决上述问题就需要安装其他的一些插件。 Step一，promise问题？axios不能直接兼容ie npm install es6-promise 使用方法： import promise from 'es6-promise'; promise.polyfill(); Step二，URLSearchParams未定义的问题，原来是IE9不支持URLSearchParams。 解决办法：下载qs npm

一、安装vue-cli 在命令行工具输入： 　　npm install vue-cli -g -g:代表全局安装。用vue -V 来检查你安装版本号（-V，是大写的） 二、初始化项目 vue init webpack demo-name demo-name：标识项目名称 输入命令后，会询问我们几个简单的选项，我们根据自己的需要填写就可以了。 Project name :项目名称。注意：这里不能使用大写。 Project description :项目描述。 Author ：作者，如果你有配置git的作者，它会读取。 Install vue-router? : 是否安装vue的路由插件。yes Use ESLint to your code? :是否用ESLint来限制你的代码错误和风格。自己练习不用了。如果是大型团队开发，最好进行配置。 setup unit tests with Karma +Mocha? 是否需要安装单元测试工具。我们不需要。N Setup e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试，我自己练习不需要。输入n 这样我们已经初始化好了第一步。 cd vueclitest 进入我们的vue项目目录。 npm install 安装我们的项目依赖，也就是安装package.json 里的包（也可以使用cnpm来安装）