vue项目完整搭建步骤

为了让一些不太清楚搭建前端项目的小白，更快上手。今天我将一步一步带领你们进行前端项目的搭建。前端开发中需要用到框架，那vue作为三大框架主流之一，在工作中很常用。所以就以vue为例。

下载并安装node

下载地址为：>vue项目打包为dist，默认访问服务器绑定的域名，需要配置80端口,配置位置多默认为cd /usr/local/nginx/cong下的nginxconf。

非根目录需要alias配置路径
非根目录nginx刷新空白需要try_files配置刷新时公用的indexhtml
node的静态资源结合dist可以直接放到public下

vue安装了node还是无法启动js语言是由于之前的vue可能会有卸载残留，在电脑中搜索vuecmd将其删除即可。删除后输入如下命令npminstalvue-g，npminstallue-router-g，npminstallvue-cli-g即可安装成功。

一、node运行环境

1、npm install -g n  

通过npm 全局安装node

2、 sudo n 8160 

设置node版本

Password:

install : node-v8160

mkdir : /usr/local/n/versions/node/8160

fetch : >大家好，我是实验小张，简略记录一下自己做的一点儿docker基础处理过程。

1 - linux或者windows下安装nodejs环境

2 - 创建vue项目

    npm install vue-cli -g // 全局安装vue脚手架

    vue list // 查看脚手架安装工具

    vue init webpack <项目名称> // 创建vue项目，以此可以开发vue

    npm install // 安装依赖包

    npm run dev // 调试运行，vue-cli-service serve

    npm run build // 调用packagejson里面的scripts对应的脚手架命令

    输出dist

3 - 根据dist和Dockerfile文件制作镜像

    #使用 nginx最新版本作为基础镜像，dist静态web文件塞入nginx后，通过访问nginx就可以访问到我们的vue

    FROM nginx

    #将当前文件夹的dist文件复制到容器的/usr/share/nginx/html目录

    COPY/dist/usr/share/nginx/html/#声明运行时容器暴露的端口（容器提供的服务端口）

    EXPOSE 80

    #CMD:指定容器启动时要运行的命令，后台运行nginx

    CMD ["nginx","-g","daemon off;"]

    以上作为Dockerfile脚本，运行 docker build -t <镜像名称>:<版本号xx> ， 生成镜像images_test:xx

4 - 第3步中的镜像在本地，本地运行可执行 docker run -t -p out_port:docker_port images_test:xx

    如果需要再任何服务器上的docker环境下运行此镜像，则需要上传至镜像仓库，我选择的是阿里云免费个人版容器服务

    $ docker login --username=n registrycn-hangzhoualiyuncscom

    $ docker tag [ImageId] registrycn-hangzhoualiyuncscom/xxx/xxx:[镜像版本号]

    $ docker push registrycn-hangzhoualiyuncscom/xxx/xxx:[镜像版本号]

    然后可以拉取镜像，docker pull registrycn-hangzhoualiyuncscom/xxx/xxx:[镜像版本号]

5 - 上面的事情处理完毕之后，就可以部署到服务器上了，最后一步，运行自制的vue镜像

    docker run -d -p 8080:80 image_test:<version no> 

6 - 也可以通过docker-compose up -d来运行yml文件来运行镜像，还可以通过volumes参数来挂载数据卷

先大略说这么多，docker是一个比较好用的工具，提高开发效率和降低运维成本，easy~

    

一本地环境调试请求跨域问题

1配置代理域名:

config/indexjs
2npm run dev 打包  生成 dist 目录  >