脚手架
1. 安装
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配置到环境变量中
安装上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是做语法检查. 直接回车就行
按照提示执行如下命令，脚手架就会给我们大家一个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文件上传到服务器（阿里云、腾讯云）
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
- 第四步：访问