呓语 | 杨英明的个人博客

专注于c++、Python,欢迎交流

By

Vue 快速开始指南

前言

这段时间在公司实习要做个小前端,于是借机学习了一下 Vue。

安装 nodejs

1. 下载安装 nodejs

2. 配置国内淘宝源,进行加速

npm config set registry=http://registry.npm.taobao.org
npm config get registry # 检查一下

注意:windows 平台需要以下额外配置:

1. 将默认的 npm 和 npm-cache 目录移动到安装目录下,即(windows)

mv C:\Users\Administrator\AppData\Roaming\npm  "D:\Program Files\nodejs\npm_global"
mv C:\Users\Administrator\AppData\Roaming\npm-cache  "D:\Program Files\nodejs\npm_cache"

2. 修改默认设置(windows)

npm config set prefix "D:\Program Files\nodejs\npm_global"
npm config set cache "D:\Program Files\nodejs\npm_cache"

3. 增加环境变量 NODE_PATH ,内容是:(windows)

"D:\Program Files\nodejs\node_global\node_modules"

4. 添加环境变量 path:(windows)

"D:\Program Files\nodejs\npm_global"

安装 vue

1. 全局安装 vue

npm install vue -g

2. 全局安装 vue-router(路由组件)、vue-cli(vue脚手架)

npm install vue-router -g
npm install vue-cli -g 

创建 vue 项目

使用 vue-cli 脚手架工具构建基于 webpack 打包的 vue 项目

1. 使用 vue-cli 构建项目目录

vue init webpack vue01

配置选项可以参考下图(图片引用自博客:npm——安装教程、安装vue脚手架):

2. 初始化,安装依赖

cd vue01
npm install -g

3. 运行项目

npm run dev

会自动打开浏览器http://localhost:8080/#/。

注意:如果没有自动打开,请修改项目的配置文件 /config/index.js:

autoOpenBrowser: true

4. 生成静态文件,打包到 dist 目录,网站入口为 dist/index.html

npm run build

注意:这一步可用于上线,生成静态文件后就可以配置 nginx 等 web 服务器指向 dist 目录进行网站访问

Nginx 配置脚本

server {
    listen 80;
    server_name localhost;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root html;
    }
    // 修改为你的 vue 项目的 dist 目录地址
    root /root/project_dir/dist;
    index index.html;
    location / {
        try_files $uri $uri/ @router;
        index index.html;
    }
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

注意:如有需要,可以在项目目录中安装以下库(element-ui、axios、echarts)

cd projcet_dir
npm i element-ui -S
npm i axios -S
npm i echarts -S

参考资料

  • npm——安装教程、安装vue脚手架
    https://www.cnblogs.com/laizhouzhou/p/8027908.html

  • npm run build 打包后,如何运行在本地查看效果(修改 build 配置,正确打包)
    https://www.cnblogs.com/qiu-Ann/p/7477593.html

  • vue在nginx中部署(启动 vue 项目的 nginx 配置文件)
    https://blog.csdn.net/wild46cat/article/details/78025042

原创声明

转载请注明:呓语 » Vue 前端项目快速开始指南