Vue入门(一)
在这个系列中,将通过一个案例,讲解Vue的一些概念。
一、生成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目录
存放测试代码。