Vue入门（一）
在这个系列中，将通过一个案例，讲解Vue的一些概念。
这个案例主要来源于网络上的一篇文章“vue-router基本使用”，我也不知道原作者是谁，百度文章名可以找到。案例经过我的加工和改编。
一、案例演示
案例中用到了Vue组件和Vue路由器。
首页演示：
首页上除了一个LOGO图片外，就是导航菜单了，如“Home”、“About”、“User123”、“User456”，后面两个链接是用来演示如何给组件传递参数的。
“Home”菜单下还有二级菜单，如“手机”、“平板”、“电脑”。
其它链接的演示：
二、生成Vue项目
Vue程序是由一系列组件构成的，组件的后缀名是.vue，那么它肯定不能直接发布。.vue文件要经过处理，生成.js文件才能发布。
在Vue开发中，通常使用Webpack对Vue项目进行处理。Webpack的功能很多，可以自行百度了解。
Webpack的配置通常比较繁琐，所以Vue提供了一个“脚手架”，叫vue-cli，帮助我们快速生成Vue项目。
1. 安装vue-cli
命令：npm install -g vue-cli
2. 使用vue-cli生成Vue项目
假设我们要把项目建在E:\vue-demo文件夹下。
首先切换到E盘根目录并输入：
vue init webpack vue-demo
在生成Vue项目之前，需要收集一些信息，如项目名、作者等，有些选项需要做选择（使用上下箭头选择并回车）。
上图中，要求我们选择“Vue build”，我们可以选择第一项并回车。
如下图所示选择其它选项并生成Vue项目：
Vue项目生成后，使用“npm run dev”即可运行。
“npm run dev”命令执行时，会打开一个内置的Web服务器“webpack-dev-server”，在浏览器的地址栏中输入：“http://localhost:8080/”，可以看到运行结果。
三、Vue项目的目录结构
在Visual Studio Code中，打开E:\vue-demo文件夹，可以看到Vue项目的目录结构如下：
我们来详细解说一下这些文件和文件夹的作用。
1. index.html
index.html是首页，Vue框架构建的是单页应用，整个App只有一个页面，其它功能都是“Vue组件”，放在.vue文件中。
index.html中的内容很简单，<body>中只有一行：“<div id="app"></div>”。
2. package.json
这个文件是项目的配置信息。
{
"name": "vue-demo", // 项目名
"version": "1.0.0", // 版本号
"description": "A Vue.js project",
"author": "hanhf",
"private": true,
"scripts": { // 脚本
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev", // 可以用npm start启动项目
"build": "node build/build.js"
},
"dependencies": { // 应用依赖项
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": { // 编译依赖项
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}3. build目录
我们可以修改build目录中的webpack.base.conf.js，将ESLint语法检查取消掉，免得JS代码中总是出现错误提示：
const createLintingRule = () => ({
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'), resolve('test')],
// options: {
// formatter: require('eslint-friendly-formatter'),
// emitWarning: !config.dev.showEslintErrorsInOverlay
// }
})4. config目录
存放开发环境的配置。
我们可以修改config目录中的index.js文件，改变Web端口。
5. dist目录
存放打包生成的结果。这是可以发布到生产环境的结果。
可以试着用“npm run build”构建一次，看一下dist目录中的内容有哪些。
每次构建都会清空这个目录，重新生成。
6. node_modules目录
存放Node的模块，Vue项目中用到的模块都放在这个目录，方便构建时使用。
7. src目录
存放开发者的代码。
8. static目录
存放静态资源。Webpack在构建时不处理static目录中的内容。
9. test目录
存放测试代码。
下一讲我们将开始上述案例的编程。
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
