1. 安装node.js
- node.js是什么?
node.js是JavaScript的运行时环境,它不是一个JavaScript框架,更不是浏览器前端的库,不能与jQuery、AngularJS等相提并论。node.js是一个让JavaScript运行在服务端的开发平台,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。 - 安装参考：http://www.cnblogs.com/wuac/p/6381819.html
2. 安装npm（可略过，node安装里面自带了npm）
- 什么是npm？
它是node的包管理工具。npm为开发者提供了一个很好的分享重用的方式，同时提供了很好的方式来更新代码。这些被重用的代码称作包，有时也称作模块。一个包通常包含了一个或者多个文件，同时也包含了一个定义了这个包元信息的文件"package.json"。在一个应用中，例如网站会依赖成百上千个包，这些包一般来说都比较小。通常情况下开发者创建一个包用于解决一个特定的问题。 - 安装命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
注：这里利用了淘宝的镜像服务器，因为大部分的源都在国外的地址，安装起来特别慢，所以这里使用了淘宝的镜像。
3. 安装vue-cli脚手架
接着安装全局的vue-cli脚手架，用于帮助你快速搭建所需的Vue的开发模板框架
cnpm install -g vue-cli回车，等待安装,安装完成后，可以输入vue -V 然后回车，如果出现vue客户端版本号，则说明成功的安装了vue
4. 用npm安装webpack
- webpack是什么?有什么用?
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 - 安装命令:
cnpm install webpack -g
可以使用:webpack -h试试是否安装成功.
5. 快速构建Vue项目
前面一大堆的安装,就是为了接下来的快速构建项目
步骤:
- 磁盘下新建目录:如 D://demo/vue_test
- cd到D://demo/vue_test目录下
- 输入命令:
vue init webpack test1 //(项目名称:test1),初始化项目以后,就可以看到许多的文件夹了
各个文件夹的说明如下:
目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录，包括端口号等。我们初学可以使用默认的。
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片，如logo等。
components: 目录里面放了一个组件文件，可以不用。
App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js: 项目的核心文件。
static 静态资源目录，如图片、字体等。
test 初始测试目录，可删除
.xxxx文件 这些是一些配置文件，包括语法配置，git配置等。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式
- 切换到项目根目录下(上面创建的目录位置在
D://demo/vue_test/test1) - 如果没有安装npm,需要先安装npm
-
npm run dev以开发模式运行项目
此时就已经看到项目启动了
D:\vue\test_vue_cli\vue-test1>npm run dev
> test1@1.0.0 dev D:\vue\test_vue_cli\vue-test1
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 3835ms 10:15:27
I Your application is running here: http://localhost:8081
访问地址: http://localhost:8081 , 即可看到如下的页面
捕获.PNG
此时说明项目已经成功的运行了。
6. 部署编译
- 在项目的根目录下运行命令
npm run build执行打包,命令执行完毕以后,即可在项目的根目录下看到生成了一个dist的文件夹, 此dist文件夹就是打包生成好的项目了,可以直接放在nginx下进行部署了 - 网上下载nginx,下载地址http://nginx.org/en/download.html,下载时候一定要注意自己的环境是windows还是linux环境，以免下错版本，解压下载好的nginx文件
- 配置部署，编辑
D:\software\nginx\nginx-1.15.5\conf\nginx.conf下的nginx.conf,修改如下图
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root "D:\demo\vue-test\test1\dist";
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
主要关注的地方有:
listen 80; // 部署的端口号
server_name localhost; // 服务的地址
location / { root "D:\demo\vue-test\test1\dist"; // 刚才编译的dist目录 index index.html index.htm; }
-
启动nginx
命令行中切换到nginx解压目录的根目录,执行start nginx -
停止nginx服务
nginx -s quit -
重启nginx服务
nginx -s reload
nginx文档参考:http://www.nginx.cn/doc/
水平有限，欢迎大家批评指正~
网友评论