Node.js【前端】vue.js环境配置以及实例运转简明教程

vue.js环境配置以及实例运转简明教程

 

宣示:本文书档案编写参考如下两篇博客,是对它们的改动与补偿,欢迎点击链接查看原来的书文:

– 原文1:vue.js在windows本地下搭建环境和成立项目

原文2:Vue.js开发条件搭建


 

VUE.JS简介

 

何为Vue.js

  •   Vue.js(读音
    /vjuː/, 类似于
    view)是一套塑造用户界面包车型地铁渐进式框架。与其他重量级框架不一样的是,Vue
    选拔自底向上增量开发的规划。Vue
    的主旨库只关心视图层,并且非常容易学习,万分简单与别的库或已有项目结合。另一方面,Vue
    完全有力量驱动选拔单文件组件和Vue生态系统辅助的库开发的纷纭单页应用。
  •   Vue.js
    的靶子是透过尽大概简单的 API
    达成响应的数据绑定和烧结的视图组件。
  •   Vue.js是1个MVVM情势的框架,如若读者有angular经验,一定能够快速入门Vue的
  •   vue.js的小编是中华人,吸收了google的angular.js和facebook的react.js的特色,丢弃了jquery传统的DOM操作,选取数据绑定和指令等概念,能够说是鹏程WEB端开发的样子。

 

vue.js的特点

  • 易用:
    已经会了HTML,CSS,JavaScript?立刻阅读指南即可开首营造利用!
  • 利落:
    简单小巧的为主,渐进式技术栈,足以应付任何规模的选用。
  • 一点也不慢: 16kb
    min+gzip 的运作大小,超快虚拟 DOM ,最方便的优化

 


 

VUE.JS
条件搭建

vue.js推荐开发条件**
**

  • Node.js:
    javascript运转条件(runtime),不相同系统直接运转各类编制程序语言
  • npm:
    Nodejs下的包管理器
  • webpack:
    它首要的用处是通过 CommonJS
    的语法把装有浏览器端要求透露的静态能源做相应的预备,比如财富的联合和打包。
  • vue-cli:
    用户生成Vue工程模板

 

**vue.js安装**

1. 安装node.js

  到官网下载node.js安装包,安装进程和一般软件没有分别。安装到位后到终点查看版本号,若如下图所示,表示安装成功。

Node.js 1

 node.js环境变量新建

   其实安装完node,就活动在path里增添环境变量,但是为了未来的本地安顿项目,大家要求找到node.js的装置根目录,在中间新建“node_global”和”node_cache”三个文本夹。

a.
运营CMD依次执行以下两条命令

npm config set prefix "F:\set-soft\nodejs\node_global"
npm config set cache "F:\set-soft\nodejs\node_cache"

b.
设置环境变量:

NODE_PATH = F:\set-soft\Node\nodejs
PATH = %NODE_PATH%\;%NODE_PATH%\node_modules;%NODE_PATH%\node_global;

那般就能够把前边全局安装的装到global里还要可以向来用命令使用。

 

2.
安装webpack

npm install webpack -g

Node.js 2

 

3. 安装vue脚手架

npm install vue-cli -g

Node.js 3

 


 

新建vue.js项目

 

新建项目文件夹,终端进入该目录

  新建的话,能够在当前系统盘下直接新建,也能够切换盘符,然后在脚下的磁盘里新建文件类别,如下示例

cd 目录路径

 

听他们讲模板创立项目

vue init webpack-simple 工程名字<工程名字不能用中文>或者创建 vue1.0 的项目vue init webpack-simple#1.0 工程名字<工程名字不能用中文>

Node.js 4

命令 vue init webpack vue_project(最后这么些是成立的花色文件夹的名字)

 

工程目录如图

  初阶化达成,就到近期的磁盘里找到您的项目文件夹,里面使用了脚手架vue-cli的和webpack提供的模板进行了创办。目录结构大体上如下所示

Node.js 5

 

安装项目重视**
**

  安装 vue
路由模块vue-router和网络请求模块vue-resource,进入该项目推行:

npm install vue-router vue-resource --save 

Node.js 6

启航项目

npm run dev

 

访问:
http://localhost:8080/ 运营成功 

Node.js 7


 

运转下载的Vue
demo

 

下载demo,并解压到运营文件中 

  能够从github克隆下来,然后将项目文件夹放到有些文件中,在终极进入该文件目录,比如

f:\cd domo_vue

 

在地头安装 

npm install  //可使用缩写 npm i

 

运行 

npm run dev      //回车,会自动弹出浏览器窗口,默认地址为 http://localhost:8080

  

劳动器端运维 

 npm run build   

  会生成静态文件,在根目录的dist里,里面有个index.html,那是服务器访问的途径钦赐到那里就能够访问我们友好的种类了。然而我意识个难点正是生成index.html里引用的css和js的引用路径不对,那时候就必要团结修改一下配备了。

跻身config/index.js,修改配置,搭建实现。如下图示例:

Node.js 8

 

 


 

附录

Tmall的npm镜像安装方式

输入如下指令安装npm镜像:

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

  以往再用到npm的地方直接用cnpm来取代就好了因为npm在境内下载速度是相当的慢,推荐使用cnpm。

 

运作报错处理

运营就报错 

'NODE_ENV' 不是内部或外部命令,也不是可运行的程序或批处理文件。npm ERR! Windows_NT 6.1.7601npm 
ERR! argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"npm 
ERR! node v4.0.0-rc.5npm 
ERR! npm v2.14.2npm 
ERR! code ELIFECYCLEnpm 
ERR! yy-ydh-web@1.0.7 start: `npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profile`npm 
ERR! Exit status 1npm ERR!npm 
ERR! Failed at the yy-ydh-web@1.0.7 start script 'npm run clear&& NODE_ENV=development && webpack-dev-server --host0.0.0.0 --devtool eval --progress --color --profile'.npm 
ERR! This is most likely a problem with the yy-ydh-web package,npm 
ERR! not with npm itself.npm 
ERR! Tell the author that this fails on your system:npm 
ERR! npm run clear&& NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --devtool eval --progress --color --profilenpm 
ERR! You can get their info via:npm 
ERR! npm owner ls yy-ydh-webnpm ERR! There is likely additional logging output above.npm 
ERR! Please include the following file with any support request:npm 
ERR! D:\workspace\node_modules\yy-ydh-web\npm-debug.log

Node.js 9

 原因

  • 这是windows不支持NODE_ENV=development的安装方式 

解决

  • 安装across-env: npm install cross-env –save-dev
  • 在NODE_ENV=xxxxxxx后面添加cross-env就足以了

 

运转依旧报错

module.js:457 throw err; ^Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:455:15) 
at Function.Module._load (module.js:403:25) 
at Module.require (module.js:483:17) 
at require (internal/module.js:20:19) 
at Object.<anonymous> (D:\vue_work\fendo\webpack.config.js:2:15) 
at Module._compile (module.js:556:32) 
at Object.Module._extensions..js (module.js:565:10) 
at Module.load (module.js:473:32) 
at tryModuleLoad (module.js:432:12) 
at Function.Module._load (module.js:424:3)

Node.js 10

原因

  • 找不到webpack那个模块

解决

  • 安装该模块:
  • ccnpm install 模块名 –save-dev(关于环境的,表现为npm run dev 运转不了)
    cnpm install 模块名 --save(关于项目的,比如main.js,
    表现为npm run dev 成功之后控制台报错)
    比如escape-string-regexp、strip-ansi、has-ansi、is-finite、emojis-list
    

 

设置好后运维又报那么些模块的错:

Error: Cannot find module 'bl' at Function.Module._resolveFilename (module.js:455:15) 
at Function.Module._load (module.js:403:25) 
at Module.require (module.js:483:17) 
at require (internal/module.js:20:19) 
at Object.<anonymous> (C:\Users\fendo\AppData\Roaming\npm\node_modules\npm\node_modules\request\request.js:9:10) 
at Module._compile (module.js:556:32) 
at Object.Module._extensions..js (module.js:565:10) 
at Module.load (module.js:473:32) 
at tryModuleLoad (module.js:432:12) 
at Function.Module._load (module.js:424:3)

 

 化解方法

cnpm install bl --save-dev

npm run dev

Node.js 11