vue脚手架

脚手架

1. 安装

• 第一步：安装node.js

  Vue CLI 4.x+ 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。
  
  https://nodejs.org/en/download/
  

  =======如果想要更新node.js的版本=======
  
  1.先查看本机node.js版本：
  	node -v
  	
  2.清除node.js的cache：
  	sudo npm cache clean -f
  
  3.安装 n 工具，这个工具是专门用来管理node.js版本的，别怀疑这个工具的名字，是他是他就是他，他的名字就是 "n"
  	sudo npm install -g n
  
  4.安装最新版本的node.js
  	sudo n stable
  
  5.再次查看本机的node.js版本：
  	node -v
  

• 第二步: 将node.js配置到环境变量中

• 第三步：关于npm

  安装上node之后，自带了npm包管理工具，类似于Python中的pip。
  
  如果想要更新npm到最新版，可以执行命令：
  	sudo npm install npm@latest -g
  

• 第四步：npm淘宝源，以后基于npm安装包就会快了（相当于豆瓣的pip源）

  npm config set registry https://registry.npm.taobao.org
  

• 第五步：全局安装vue-cli

  # 安装（最新版）
  sudo npm install -g @vue/cli
  
  # 安装（指定版本）
  sudo npm install -g @vue/cli@4.5.14
  
  # 卸载
  sudo npm uninstall -g @vue/cli
  

2. 创建项目

cd /Users/wupeiqi/WebstormProjects
vue create mysite

提示：babel是一个将ES6语法转化成ES5的工具，eslint是做语法检查. 直接回车就行

a few moments later就下载完了

按照提示执行如下命令，脚手架就会给我们大家一个Web服务去运行编写的vue项目（便于开发测试）。

cd mysite
npm run serve

3. 编译部署

项目创建完，脚手架会默认会生成如下文件（包含项目依赖、配置文件、默认代码）。

如果以后项目开发完毕，想要进行项目部署，是不需要这些文件的，执行命令：

cd 项目目录
npm run build

build会将项目中的依赖和代码自动编译成HTML、CSS、JavaScript代码，后续只需要将此代码上传至服务器部署即可。

4. 目录结构

- babel.config.js      babel是ES6转换ES5的组件，这是他所需的配置文件（一般不需要动）。
- package.json         项目所需的包的版本信息。
- package-lock.json    保存项目所需的包细节以及包的依赖等信息。
- node-modules         项目安装依赖包的文件保存的地方。例如：npm install axios 
                       axios包会保存在此目录、信息也会写在 package.json、package-lock.json中   
- src
	- main.js          项目的启动 npm run serve ，用户访问时程序的入门。
	- App.vue		   主组件
	- components       子组件
	- assets           静态文件（自己的静态文件，会被压缩和合并）
- public		      【此目录下的文件直接被复制到dist/目录下，一般放不动的数据，引入第三方】
	- index.html       主HTML文件（模板引擎）
	- favicon.icon     图标
- README.md            项目说明文档

cd 项目
npm install

5. 快速上手

5.1 axios组件

安装：

cd 项目目录
npm install axios
npm install vue-axios

导入：

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

使用：

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {  // 这里的this就是Vue
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

5.2 vue-router组件

安装：

cd 项目目录
npm install vue-router@3 

引入：

// router/index.js -> 编写路由

import Vue from 'vue'
import VueRouter from 'vue-router'


import Home from '../components/Home'


Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {
            path: '/home',
            name: "Home",
            component: Home
        },
    ]
})

export default router

// main.js  -> 导入router文件并挂载到Vue上
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'


import App from './App.vue'

// 导入router文件
import router from "./router"


Vue.use(VueAxios, axios)

Vue.config.productionTip = true


new Vue({
    router: router,
    render: h => h(App),
}).$mount('#app')

使用：

App.vue -> 所有页面(组件)的父亲
<router-link to="/home">点我</router-link>
<router-view></router-view>

5.3 案例

6 线上部署

• 第一步：编译

  npm run build
  

• 第二步：将编译后的代码dist文件上传到服务器（阿里云、腾讯云）

• 第三步：安装nginx + 配置 + 启动

  yum install nginx
  

  vim /etc/nginx/nginx.conf

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        # 项目目录
        root         /data/mysite;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }


}

>>>systemctl start nginx

• 第四步：访问