Vue入门（一）-CSDN博客

Vue入门（一）

　　在这个系列中，将通过一个案例，讲解Vue的一些概念。

　　这个案例主要来源于网络上的一篇文章“vue-router基本使用”

　　一、生成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项目：

　　这里之所以不选择使用ESLint，是因为初学者可能会不习惯这个功能。ESLint用于检查JS语法，不符合它规范的语法，会报错并且导致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

　　这个文件是项目的配置信息。

 
   [javascript]  
   view plaincopy
{  
  "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代码中总是出现错误提示：

 
   [javascript]  
   view plaincopy
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  
  // }  
})  