vue.js+node.js+webpack配置方法

最新推荐文章于 2023-01-30 17:45:16 发布

dogface07

最新推荐文章于 2023-01-30 17:45:16 发布

阅读量199

点赞数

文章标签： vue nodejs npm vue.js node.js

本文链接：https://blog.csdn.net/panfu163/article/details/117226545

版权

1、Node.js 安装配置

Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。

本安装教程以node-v6.11.0-x64.msi版本为例。

安装方法

http://www.runoob.com/nodejs/nodejs-install-setup.html

Node.js默认安装目录为 "C:\Program Files\nodejs\"

1、在你项目的根目录下创建一个叫 server.js 的文件，并写入以下代码：

 var http = require('http');
var fs = require('fs');
var url = require('url');
// 创建服务器
http.createServer( function (request, response) {  
   // 解析请求，包括文件名
   var pathname = url.parse(request.url).pathname;
   // 从文件系统中读取请求的文件内容
   fs.readFile(pathname.substr(1), function (err, data) {
      if (err) {
         // HTTP 状态码: 404 : NOT FOUND
         // Content Type: text/plain
         response.setHeader('Content-Type', 'text/plain');
      }else{          
         // HTTP 状态码: 200 : OK
         // Content Type: text/plain
         //response.writeHead(200, {'Content-Type': 'text/html'});
         // 响应文件内容
         response.setHeader('Content-Type', 'text/plain');
      }
      //  发送响应数据
      response.end();
   });   
}).listen(7777);
 
// 控制台会输出以下信息
console.log('Server running at http://127.0.0.1:7777/');

例目录：C:\example_Code

命令：cd C:\example_Code---打开目录位置

命令：node server.js -执行文件起动文件（注意：端口是否被占用、如被占用无法执行）

tu2

Web 应用架构

1.HTTP 服务器架构(使用8081端口)，创建 server.js 文件，代码如下所示

var http = require('http');
var fs = require('fs');
var url = require('url');
//创建服务器
http.createServer( function (request, response) {  
   // 解析请求，包括文件名
   var pathname = url.parse(request.url).pathname;
   //从文件系统中读取请求的文件内容
   fs.readFile(pathname.substr(1), function (err, data) {
      //  发送响应数据
      response.end();
   });   
}).listen(7777);
// 控制台会输出以下信息
console.log('Server running at http://127.0.0.1:7777/');

2.目录下创建一个 index.htm 文件

  <html>
<head>
<title>Sample Page</title>
</head>
<body>Hello World!</body>
</html>

3.执行 server.js 文件

$ node server.js 
Server running at http://127.0.0.1:8081/

4、最后http://127.0.0.1:8081/index.htm 输出 Hello World!

如没有npm命令需要安装npm

1.安装npm install -g cnpm –registry=https://registry.npm.taobao.org

安装webpack

1.安装webpack命令如下

在终端中转到该文件夹后执行下述指令就可以完成安装

//全局安装Cnpm install -g webpack

//安装到你的项目目录

Cnpm install --save-dev webpack

1.找到项目文件夹使用下面密命打包

webpack js/router.js js/bundle.js

2、接下来我们使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)

注意：加载CSS 需执行下面命

cnpm install css-loader style-loader

安装VUE项目步骤

我们首先，需要安装vue-cil。命令如下

npm install -g vue-cli

首先，我们在终端中把当前目录定位到你准备存放项目的地方。如我是准备放在~/Sites/MyWork/这个目录下面，那么我的命令如下：

cd ~/Sites/MyWork

进入到目录之后，我们按照下面的代码逐条输入，新建一个自己的vue项目

vue init webpack vuedemo

输入这个命令之后，会出现一些提示，是什么不用管，一直按回车即可

如上图所示，就说明我们的项目构建成功了。并且，给出了下面要执行的命令，我们来逐条执行：

cd vuedemo

cnpm install

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

最后，执行下面一句，把项目跑起来

npm run dev

打包部署服务器

3.然后我就执行了npm run build 打包

服务器只要上传dist文件的代码即可

如：启用了ESLine来检查语法

在bulid文件下webpacj.base.conf.js中找到关于esline的loader 删除

配置文件

我们可以将一些编译选项放在配置文件中，以便于统一管理：

创建 webpack.config.js 文件，代码如下所示：

var webpack=require('webpack'); module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" } ] }, plugins:[ new webpack.BannerPlugin('菜鸟教程 webpack 实例') ] };

dogface07

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue.js+node.js+webpack配置方法

1、Node.js 安装配置 Node.js安装包及源码下载地址为：https://nodejs.org/en/download/。本安装教程以node-v6.11.0-x64.msi版本为例。安装方法http://www.runoob.com/nodejs/nodejs-install-setup.htmlNode.js默认安装目录为 "C:\Program Files\nodejs\"1、在你项目的根目录下创建一个叫 server.js 的文件，并写入以下代码： va.
复制链接

扫一扫