vue基础与项目构建入门

摘要：基础与项目构建入门最近两年，同学们出去讨论前端的框架，相信大家对也并不陌生，并称前端三大框架各有各的特色，在这里说一下，我们非常有必要学习这些东西，不管是求职面试，还是公司需要什么是读音，类似于是一套构建用户界面的渐进式框架。

最近两年，同学们出去讨论前端的框架，相信大家对vue也并不陌生，vue、angular、React并称前端三大框架！各有各的特色，在这里说一下，我们非常有必要学习这些东西，不管是求职面试，还是公司需要！

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动！

首先创建一个HTML，我们加入下边两行代码

//引入vue




  {{ message }}


//挂载vue
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!"
  }
})

最后浏览器会打印出Hello Vue！

今天教大家的不是这个，是怎样使用vue-cli和如何依据cli，自己搭建我们自己需要的项目

npm install -g vue-cli

vue init webpack my-project

cd my-project

npm install

npm run dev

输入npm run dev之后会进入一个欢迎页面！

只需要5步我们的vue项目就构建完毕了，
大家看一下构建出来的项目结构！

├── build // webpack/node配置文件
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   └── webpack.prod.conf.js
├── config // 环境配置文件
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── node_modules // npm包文件
├── src // 静态资源文件
│   ├── assets
│   │    └── logo.png
│   ├── components 
│   │    └── Hello.vue 
│   ├── router
│   │    └── index.js 
│   ├── App.vue 
│   └── main.js
├── static
├── .babelrc // babel配置文件
├── .gitignore // gitignore忽略文件
├── .editorconfig // 编码风格配置文件
├── .postcssrc.js // postcss配置文件
├── package.json // node包管理文件
├── index.html // 首页模板
├── package.json // 包管理文件
└── README.md // 描述文件

是不是特别的复杂，下边我们依据项目目录搭建我们需要的架构！

我们分析需求我们需要这些东西

文件/文件夹创建

package.json文件创建

webpack配置文件创建

入口文件创建

vue组件编写

路由配置

下边我们根据结构拆分为下边这样，大家建立文件夹，一一建立

{
  "name": "vue2",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"
  },
  "dependencies": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^2.29.0",
    "install": "^0.10.1",
    "npm": "^5.3.0",
    "vue": "^2.4.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

npm install 

初始化我们的项目，会给你安装一个npm包！

module.exports = {
    ...

    module: {    
        rules: [
            {
                test: /.vue$/,
                loader: "vue-loader",
            }，
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
        ]
    },

    ...

}

// entry.js
import { app } from "./app.js"

app.$mount("#app")

// app.js
import Vue from "vue"
import App from "./App.vue"
import router from "./router"

const app = new Vue({
    router,
    ...App
})

export { app, router }

我们创建一个最简单的index.vue项目，我们之前已经创建好了

同时我们需要编写最外层父组件App.vue，一般像下面这样，主要嵌套一层router-view来动态展示不同路由下的内容:

import Vue from "vue" // 引入vue
import Router from "vue-router"  // 引入路由

Vue.use(Router) // 注册路由

import Index from "../views/index.vue"  // 引入我们刚刚编写的简单的组件

export default new Router({
    mode: "hash",
    routes: [
        {
            path: "/",
            name: "index",
            component: Index,
        },
        { 
            path: "*", 
            redirect: "/" 
        }, 
    ]
})

npm install webpack-dev-server --save-dev

"scripts": {
    "dev": "webpack-dev-server",
    "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js"
}

启动webpack-dev-server，你会看到hello world!这几个大字，这样大家就可以进行自己的项目编写了！