Vue-cli简单易懂

搭建环境欲善其事，必先利其器。我们的学习计划从学习搭建Vue需要的环境开始。node和npm环境不用多说了。现在前端Process很流行，基本上新的技术都会在这个process的基础上发展起来，我们只需要站在巨人XX上安装*即可。我假设你的机器上已经有了最新的node和npm，那我们只需要执行下面的命令：$npminstall-gvue-cli搭建完成后，进入我们事先准备好的一个目录即可，比如demo目录，然后在该目录下进行初始化操作：$vueinitwebpackvue-cli-demowebpack参数指的是vue-cli-demo项目，在开发和完成阶段会自动帮你打包代码，比如asunitingjsfilesintoafile,统一合并压缩CSS文件。在init（初始化）的过程中，会要求你为项目定义一些描述、版本等信息。你可以忽略它。只需输入y确认并跳过。完成后会出现如下界面，有的会提示你进行下一步操作。按照提示继续输入代码。同时获取信息：npmi-Saxiosvue-axioscdvue-cli-demonpminstallnpmrundevnpminstall是安装项目需要的依赖，简单理解就是安装一些必须的插件，需要等待一会儿;你也可以使用yarnnpmrundev来执行我们的项目。这条命令执行完后，稍等片刻，浏览器应该会自动为你打开一个标签页为http://localhost:8080/#/或http://127.0.0.1:8080/#/的链接，这个链接是我们本地开发的项目的首页，如果没有链接，说明出错了。请移步评论区回复。..生成的文件查看Vue为我们生成了哪些文件：yarnnpm包管理工具(facebook)README.md通常所有项目的描述文件package.json维护包管理的配置文件，包括版本index.htmlHomepage.postcssrc。jspostcss配置.gitignoregit忽略文件list.eslintrc.js代码检查配置文件.eslintignore代码检查忽略文件.editorconfig编辑器配置文件.babelrcbabel配置文件静态网站静态资源src源代码src/assets资源（可预处理)src/components组件目录src/router路由src/App.vue根组件src/main.js入口文件config配置目录build构建工具相关测试测试目录test/unit单元测试test/e2e端到端测试targetdist打包后的代码。我们需要注意的是下面这个文件package.json保存一些依赖信息，config保存一些项目初始化配置，build保存一些webpack初始化配置，index.html是我们的主页，除了这些，最关键的代码在src目录下，index在很多服务器语言中都预设为首页，如index.htm、index.php等；打开build目录下的webpack.base.conf.js，会看到这段代码module.exports={entry:{app:'./src/main.js'}}表示我们的入口js文件在main.js在src目录中。下面我们先来分析一下这些初始化代码；follow代码遵循Vue的核心架构。根据官方的解释和个人理解，主要在于组件和路由这两个模块。只要理解了这两个模块的思想内容，剩下的API使用也只是分分钟的事情。因为是偷偷摸摸的，所以我们只关注src里面的文件来开发简单的应用。第一个是src://下的main.js使用`import`命令加载的Vue构建版本//（仅运行时或独立）已经在webpack.base.conf中设置了别名。importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'importAxiosfrom'axios'importVueAxiosfrom'vue-axios'Vue.use(VueAxios,Axios)Vue.config.productionTip=false/*eslint-disableno-new*/newVue({el:'#app',router,template:'',components:{App}})首先第一句importVuefrom'vue'很好理解，就像你要介绍jQuery，vue就是jquery-min.js，然后Vue就是$;然后引入./App文件，该文件在与main.js同级目录下的App.vue文件中；在vue中导入文件可以直接导入，文件后缀可以是.vue，这是vue自带的文件类型。前面提到的webpack会打包js和css文件。同理，在webpack中配置vue插件后（项目默认配置），webpack可以集成打包.vue类型的文件，类似于nodeJs中的require。它也类似于exportdefault{name:'app'//仅在调用自身时使用}//渲染页面还涉及到路由路由这段代码在页面中放了一个路由视图容器，当我们访问http://localhost:8080/#/about/about的内容就会放入，访问http://localhost:8080/#/recruit时会放入recruit的内容。上面提到的src/main.js中有一句话介绍了router的代码。importrouterfrom'./router'现在我们打开路由器目录下的js文件。importVuefrom'vue'importRouterfrom'vue-router'importHelloWorldfrom'@/components/Hello'//@alias等同于srcVue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'Hello',component:HelloWorld}]})首先引入路由插件vue-router，然后明确声明应该使用路由Vue.use(Router)。注意Hello、About等都是页面（或组件），然后注册路由器，然后开始配置路由。路由配置应该一目了然，不同的页面（或者说组件，页面和组件其实是同一个概念）分配到不同的路径。name参数并不重要，仅用于标识。看到这里你就明白了，上面说的红框里面的内容其实就是Hello里面的内容，打开components目录下的HelloWorld.vue就可以理解了。build文件夹和config文件夹简介//buildforproductionwithminification//buildproductcompressionnpmrunbuild//buildforproduction并查看bundleanalyzer报告//buildproduct并查看包分析报告npmrunbuild--reportconfig判断是否在线，加载的资源不同。先总结一下前面的内容：搭建环境代码逻辑单页组件（简单通过）路由和子路由上面的过程是我们刚开始接触Vue时的简单介绍。我之前说过。学习Vue掌握了组件和路由的基本概念后，对我们后续了解它的工作机制会有很大的帮助。本章我们只简单介绍一下单页组件。