【Vue】搭建开发环境

 

学习一个新东西的时候，先要把开发环境搭起来，最近想学学前端技术，vue的开发环境搭建还是比较简单，这里简单记录一下

 

搭建环境

1. 开发工具

---

• vscode
• vscode插件 - vue（语法高亮）

2. 运行环境

---

• 安装node.js
• 查看版本信息 node -v

3. 包管理工具

---

 

• npm（国外源）
  随node.js安装，查看版本信息npm -v

• cnpm（淘宝源）

npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装包

npm install -g @vue/cli

 

• 卸载包

npm uninstall vue-cli -g

 

4. 打包工具

---

 

• 安装webpack

npm install webpack -g

 

5. 安装vue-cli（脚手架）

---

 

vue-cli 4.0+已改成@vue/cli，若安装旧版先卸载

• 安装

npm install -g @vue/cli

• 卸载旧版vue-cli

npm uninstall vue-cli -g

•  查看版本信息
  vue -v（注意是大写）
• 使用

1. 创建项目： vue create projectname
2. 编译和热更新：npm run serve
3. 编译并压缩： npm run build

 

实践

创建项目

---

 

cmd 到要创建项目的文件夹

1. 脚手架创建项目

1.1. 脚手架创建 vue create my-project 注：项目名称不能有大写
1.2. 选择配置（默认/手动），通过上下键选择，这里就选默认
1.3. 选择完成回车等待创建完成
1.4 创建完成会生成一个项目名称一样的文件夹

 

2. 通过ui创建

vue ui

会打开一个创建页面，可以在上面创建项目，启动调试，编译生成等，ui很简单，就不介绍。

 

调试运行

---

cmd到项目文件夹（不是上面创建的文件夹，而是通过脚手架/ui创建的项目名称文件夹），执行

npm run serve

 

每次运行都必须定位到对应文件夹，这个比较繁琐，下面介绍几个使用技巧

若vscode开发，直接在终端执行

2. 通过powershell执行，打开对应文件夹，shift+鼠标右键，然后选择在此处打开powershell

3. 在文件夹路径前加cmd 空格 ，直接定位到对应的文件夹

 

 

编译生成

---

cmd执行

npm run build

在项目文件生成dist文件夹

 

部署前端文件

---

1. 跟后台服务器（iis,tomcat）一起发布

把生成资源文件拷贝到后台服务器静态资源文件夹，后台服务器设置启动页

• 优点
  1. 简单，不需要部署多台服务器
• 缺点
  1. 前端人员需要和后端人员配合
  2. 发布后有调试问题还是需要基于后端服务器

2. 前端独立部署

nginx做前端资源的web 服务器，反向代理后端服务器的请求

• 优点

1. 前后端单独部署，方便各自排查文档
2. 前后端人员减少沟通成本
3. 可以在nginx解决跨域问题，不需要后台服务器处理

• 缺点

1. 增加复杂性，但这个在nginx里算不上什么

nginx 配置文件

    server {
        listen       80;
        server_name  localhost;

       
        location / {
            root   f:\codes\vue\my-project\dist;
            index  index.html index.htm;
        }

        location /api {
            proxy_pass   http://127.0.0.1:8080;
        }
}

 

转发请标明出处：https://www.cnblogs.com/wilsonpan/p/12719082.html