vue基础与项目构建入门

vue基础与项目构建入门

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

什么是vue

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

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

//引入vue
<script src="https://unpkg.com/vue"></script>


<div id="app">
  {{ message }}
</div>

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

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

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

vue-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组件编写
• 路由配置

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

文件夹创建

package.json文件

{
  "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包！

webpack配置文件

module.exports = {
    ...

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

    ...

}

配置项目入口文件entry.js，

// 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 }

vue组件编写

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

<template>
    <h1>hello world!</h1>
</template>

<script>
//可以写vue语法
</script>

<style>
//可以写css
</style>

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

<template>
    <router-view></router-view>
</template>

<script>

</script>

<style>

</style>

配置一下我们的路由

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: '/' 
        }, 
    ]
})

webpack-dev-server

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

在package.json配置启动命令

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

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