环境配置
首先先安装node环境，如果在windows上，直接去官网下载，选择windows系统（.msi），下载完成后一路安装就好。安装成功后，windows命令行中会多两个命令，一个是node，一个是NPM。节点就是启动VUE和koa2的关键命令，NPM是一个管理第三方插件的包管理器，负责下载和删除你的模块。
分别运行node -v和npm -v来检测环境是否搭建成功，如果出现以下信息则说明节点环境已配置成功！
由于国内访问国外的网站一般都比较卡，而npm又是国外网站，所以我们需要通过NPM安装CNPM用以代替NPM
npm --registry https://registry.npm.taobao.org install cnpm -g
CNPM的用法和NPM完全一样，可以通过以下命令来安装
cnpm i 模块名 -S
** i 是 install 命令的简写
** -S 是 --save 的简写,可以将模块信息写入项目根目录下的package.json文件中，package.json就是专门存储模块信息位置的
一般我们可以用 npm init 或者 cnpm init 初始化package.json配置文件,就会自动在命令所运行的目录下自动生产package.json配置信息
** -g 或则 --global 是全局安装，将模块安装到当前系统用户的node_moudels目录下，全局安装的模块可以在任何目录下使用
可以我们使用
cnpm i koa -S来安装我们需要的KOA模块
在当前目录及当前目录的任何子目录下，可以像这样来引入模块
var koa = require('koa')
当然，vue的环境搭建是非常麻烦的，我们不推荐使用这种
cnpm i方式从根目录一个文件夹一个文件这样方式去创建整个项目，因为这样做你起码会平白无故的浪费半个多小时的时间，把所有的精力都花费在了环境配置的问题上。所以，在这里，我们推荐使用VUE的脚手架，来帮我们更简单的搭建整个项目。全局安装脚手架
cnpm i vue-cli -g
// 脚手架初始化项目
vue init webpack 项目名
当然，如果你看到过其他博客或者视频教程，他们有可能会推荐你用
webpack-simple，很明显，认为他们webpack-simple比webpack更轻量级，企业会最优先使用。当然，对于这个我不可否认。但是，如果你要用坚持webpack-simple的话教育，你会发现，你当引入其它第三方模块的css状语从句：js的话教育，你的页面上就会报一大堆错误信息，你因为的webpack.config.js这个文件，的中css状语从句：style的loader还没配齐全，你需要去下载，然后，当你解决了这个错误之后，会有汉语中类似的image这些图片的格式问题等着需要你去解决，这就会非常麻烦了。为什么我会建议你现在用webpack，因为它会帮你在学习阶段省去很多不必要的麻烦，你将注意力的集中主要在vue框架的设计上，而去不是解决vue脚手架的各种loader问题。当你运行了
vue init webpack demo之后，下面只要一路回车，在出现的时候，选择第三个，不，我会自己处理，
npm前面我说过，太慢了，而你的windows有可能还没安装yarn，所以你现在先不安装，等你自己去根目录下，用自行cnpm i来用cnpm安装项目所需要的模块。在当前目录下便会出现这么一个文件夹，
演示，这就是你刚刚用VUE脚手架创建的VUE项目，结构目录如下 | （webpack编译输出js的目录） | config（项目环境的配置文件） | index.html（客户端效果展示页面） | package.json（package.json包管理配置文件） | README.md（作者文档，可以忽略） | src（项目文件主目录） | App.vue（主组件，内嵌组件文件夹的所有子组件） | main.js（程序的入口） | 路由器（路由网址配置） index.js（路由配置的主入口） | components（子组件目录）
| HelloWorld.vue (vue组件)
| asserts (资源目录)
| logo.png
| static (静态资源目录)
| test (测试文件夹)
在有
package.json文件的目录下，也就是项目的根目录，运行cnpm i命令，它会自动查找package.json文件中的依赖模块并下载，下载完成后，你将会看到当前目录生成了一个node_mouldes的文件夹，这里面就是存放了你刚刚下载的所有模块，不过这些模块只对当前目录有效，不同于全局安装的模块。以上众多目录中，我们目前只要关心
src目录就可以了。其次是static目录，你可以将js、css、img等静态资源放入此文件夹下。进入
src目录main.js
import Vue from 'vue' // 引入vue框架
import App from './App' // 引入App.vue
import router from './router' // 引入路由配置信息
// 设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
new Vue({
el: '#app', // 组件的id值，div的id为#app时，那么这个div标签就是主组件
router, // 路由配置信息
components: { App }, // 将App.vue作为组件传入
template: '<App/>' // 相当于一个标签，以后再html中可以像这样使用<App/>
}) 的index.html
的HTML
<！DOCTYPE HTML>
<HTML>
<HEAD>
<元的charset = “utf-8”？>
<元名称= “视口”内容=“宽度=设备宽度，初始规模= 1.0" ？>
<TITLE>演示</ TITLE>
</ HEAD>
<BODY>
<！ -这个格的ID值为main.js中设置的EL值，那么这个格就是主组件- >
<DIV ID = “应用程序”> </ DIV>
</ body>
</ HTML>
App.vue
HTML
<！ -这里可以写HTML代码，和引入的VUE组件标签- >
<模板>
<div id =“app”>
<img src =“。/assets/logo.png“>
<！ - router-view这个很关键，它是用来做路由切换的，它会显示成一个vue视图，它和路由器文件夹的关系很大 - >
<router -view />
<！ - 在下方的组件被挂载完成之后，这里可以使用，有关vue组件的用法，在以后篇幅会有相关介绍 - >
<
导航>
App.vue组件，这里可以写js代码//导入vue组件，组件文件夹就是我们先前过滤的组件文件夹import。最佳“; 从“./components/Nav”导入的导航; export default {name：'App'，/ *你可以像这样把组件作为当前组件的子组件挂载到模板中最外层的div上，也就是那个id为app的div。挂载组件之前请记得要先导入，* / components：{'top'：Top，Nav，//如果在模板中要写的名字和这个组件变量名一致，那么这样写就相当于//'Nav'：/ *这里可以写css代码* / ＃app {font-family：'Avenir'，Helvetica，Arial，sans-serif; -webkit-字体平滑：抗锯齿; -moz-OSX的字体平滑：灰阶; 文本对齐：中心; 颜色：＃2c3e50; 边距：60像素; } </样式>
>
路由器/ index.js的js //引入Vue的框架，因为下面要使用它的使用（）方法将VUE路由器这个组件挂到VUE框架上，这样在任何地方就可以方便的使用vue-路由器这个插件了import vue from'vue'/ *引入vue-router这个专门用来做路由的插件，这个并不属于vue框架的一部分，他要单独通过cnpm命令去下载。不过vue- cli这个脚手架已经帮我们安装好了，是不是挺方便的呢~~ * /从'vue-router'导入路由器//在项目创建之后，在组件目录下会默认有个HelloWorld.vue的组件，在这里被导入从'@ / components / HelloWorld'导入HelloWorld //使vue-router这个插件生效，以后这个$ route就可以调用vue-router中定义的public属性和方法，因为它已经属于组件的一部分了这就是每个组件的脚本标签的出口默认{}中的组件对象Vue.use（路由器）//导出所有的路由配置信息导出新的默认路由器（{路线：[{ 路径：'/' ，//就好像访问了localhost：8080 /,App.vue中的<router-view />这个标签就显示了HelloWorld.vue中的内容一样 name：'HelloWorld'，//以后在组件中通过此$ route.name就可以获取到这个值了，详细介绍请等续更.. 组件：HelloWorld的//这个名称要和进口的组件变量名相同 } ] }）- -
扫一扫
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
