成立二个Vue项目,vue框架搭建步骤

By admin in 4858美高梅 on 2019年4月10日

包容IE是个坑,低版本IE很多都无法跑起来

1,安装node.js

     
到普通话官网http://nodejs.cn/下载安装包,安装到位后得以在dos命令行中输入node
-v
成立二个Vue项目,vue框架搭建步骤。npm -v来检查测试安装版本即可判断是或不是安装成功,如图:

4858美高梅 1

Vue框架搭建

Vue.js不匡助IE八及其以下版本,因为Vue.js使用了IE八不能够效仿的ECMAScript5表征。

难点现象:vue-cli项目在IE下运作,会在钩子函数出现ReferenceError:
“Promise”未定义

2,安装vue-cli

安装完node之后,大家得以全局安装vue-cli,

npm install -g vue-cli     

不过那种装置格局比较慢,推荐使用国内镜像来设置,所以我们先安装 cnpm:

npm install -g cnpm –registry=

只要设置退步,能够应用npm cache
clean清理缓存,然后再重新安装。后边的装置进程中,如有安装失败的情况,也急需先清理缓存

如出壹辙能够动用cnpm -v查看是还是不是安装成功

4858美高梅 2

然后接纳 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

新型的 vue 项目模板中,都包蕴 webpack 插件,所以那边能够不设置 webpack

安装完结后,能够使用vue -V(注意 V 大写)查看是还是不是安装成功。

4858美高梅 3

要是提示“不恐怕辨识 ‘vue’ ” ,有一点都不小恐怕是 npm 版本过低,能够动用 npm install
-g npm 来更新版本

一、vue基础框架搭建

在用Vue.js营造大型应用时推荐使用NPM安装,Npm能很好地和诸如Webpack或Browserify模块打包器协作使用。Vue.js也提供配套工具来开发单文件组件。

化解办法:

3、生成项目

率先要求在命令行中进入到品种目录,然后输入:

vue init webpack Vue-Project

里面 webpack 是模板名称,能够到 vue.js 的 GitHub
上查看更多的模板https://github.com/vuejs-templates

Vue-Project
是自定义的项目名称,命令执行之后,会在现阶段目录生成两个以该名称命名的项目文件夹

4858美高梅 4

布置达成后,能够见到目录下多出了2个门类文件夹,里面纵使 vue-cli
创立的一个基于 webpack 的 vue.js 项目

接下来进入项目目录(cd Vue-Project),使用 cnpm 安装正视

cnpm install

(若是运行cnpm install报错npm E酷威奥迪Q5! path
E:\workspace\vue\node_modules\js-beautify\js\bin\css-beautify.js,需要在gitHub上下载js-beautify,地址:js-beautify1.7.0地址)

接下来运行项目

npm run dev

万壹浏览器打开之后,未有加载出页面,有不小可能率是地点的 8080
端口被挤占,须要修改一下配置文件config>index.js

4858美高梅 5

建议将端口号改为不常用的端口。其它小编还将 build 的门径前缀修改为 ‘ ./
‘(原本为 ‘ / ‘),是因为包装之后,外部引进 js 和 css 文件时,如若路径以
‘ / ‘
开始,在地面是无力回天找到呼应文件的(服务器上没难题)。所以只要急需在本地打开包装后的文件,就得修改文件路径。

可参照https://www.cnblogs.com/princesong/p/6728250.html
整合搭建

 

step一:安装新型的web-pack-server
命令行:npm install –save-dev webpack-server

四、打包上线

友善的类型文件都亟待停放 src 文件夹下

花色支出到位未来,能够输入 npm run build 来开始展览打包工作

npm run build

包裹达成后,会转移 dist
文件夹,借使已经修改了文本路径,能够间接打开当三步跳件查看

项目上线时,只要求将 dist 文件夹放到服务器就行了。

4858美高梅 6

搭建vue框架前,先安装4样东西:(ie版本ie玖以下vue是不协助的)

vue的安装依赖于node.js,要保险您的总计机十二月安装过node.js。能够进去cmd编辑器,输入node
-v进行查看。node尽量要用1些新的本子,不然继续安装会提示node版本过低。去node官网下个新版node重新安装就足以。如已设置

4858美高梅 7

IE浏览器包容性化解方案

消除措施:安装 “babel-polyfill” 即可。

命令:cnpm install –save-dev babel-polyfill 

4858美高梅 ,在入口main.js文件引进:import ‘babel-polyfill’

提起底一步,在build文件夹下找到webpack.base.conf.js.

4858美高梅 8

将第9行的始末替换一下即可。

4858美高梅 9

module.exports = {

entry: {

app: [“babel-polyfill”, “./src/main.js”]

},

一、 Node.js(依照电脑配置来安装,百度查寻依旧到node官网下载);

 

step2:安装Babel
Polyfill 

二、必须在叁.捌本子以上才行(也可安装天猫商城的npm镜像npm install -g cnpm
–registry=
https://registry.npm.taobao.org
来处理)。

得逞node会出现如下:

命令行:(1)npm install –save
babel-polyfill

叁、vue-cli脚手架的设置(建议全局安装 (npm)cnpm install -g vue-cli 

4858美高梅 10

(2)在webpack.base.conf.js那些文件加入代码
require(“babel-polyfill”)

4、 安装webpack (建议全局安装 (npm)cnpm install -g webpack

 

4858美高梅 11

前四样装好后,即可开头vue框架的搭建了:

退出当前目录,进入nodejs

(三)在main.js里面添加代码 import “babel-polyfill”;

选定一个安装的地点通过cmd命令vue init webpack
vue_project
(最终那一个是自家创造的连串文件夹的名字,你可活动命名,也可在履行中期维修改命名)
 -如图1

4858美高梅 12

4858美高梅 13

4858美高梅 14

node安装成功后就能够起来vue的装置了。(使用天猫镜像的cnpm来代替npm的设置会快很多。Taobao镜像推荐网址:。)

step3:运营vue-cli项目 npm run
dev 那时IE已经能够日常跑项目了!

图1

 

原文:

在装置进程中会经过这一步,问是还是不是安严苛情势情形来,小编建议初学者,且尚未特强的书写规范的挑选no选项,以防在付出进度中冒出部分凶残规范需求的报错。

万1采纳Taobao经先锋安装就输入指令行 $ cnpm install -g vue-cli
实行设置,要是未有设置天猫商城镜像依旧利用$ npm install -g vue-cli安装

    当选项都成功后,便会生成如下图二文件

4858美高梅 15

4858美高梅 16

注意:V大写

图2

到此截止Vue已成功安装。

并发此文件,就是你的vue框架基本文件的变异。

 

       下一步,本地安装和平运动作项目。在文件当前输入 cnpm
install
您会意识在早就创建的品种结构里面会多出一个node_modules的文书夹,里面纵使刚刚安装的有着依赖。

创立1个Vue项目

设置好后在命令行中输入cnpm run dev回车即可;

 

4858美高梅 17

那里大家采用vue的官方命令行工具——vue-cli。

     
 当vue跑起来后可通过页面http://localhost:8080
来打开页面,当然页面包车型客车端口好可依据活动习惯来改变,如下图像和文字件下(config/index.js)

//全局安装 vue-cli

4858美高梅 18

$npm install –global vue-cli

图4

//创设二个基于webpack模板的新类型

比如:将prot 的参数改成 808九,则页面包车型地铁链接为http://localhost:8089

$vue init webpack my-project

     
 至此,vue的简洁版框架已经搭建达成,在付出中依照项目中所需的有个别效果要用到的插件,项目中不可缺少的插件例子:

$ cd my-project

Vuex     cnpm   install  vuex -–save

$ npm install

Axios也许 jq (调用ajax所要求的,依照事态选其1就好)  cnpm install
axios –save 恐怕 cnpm install jquery -–save

$ npm run dev

Less 或许 sass(更加好的规范样式的时候要用到的选其1就好)cnpm install
less-loader less -–save-dev 大概cnpm install sass-loader sass -–save-dev

就下去依次执行vue init webpack
输入本人项目标名目,然后进入你建的种类文件夹,此事一度开端化了三个vue项目,但近来项目还不能够运转。须要安装相应的脚手架工具,所以继续执行命令行npm
install,有天猫镜像的采用cnpm
install,安装成功后你会发觉项目里多了个

babel-polyfill (此插件pc端必供给装,思索ie9的显示难点必要此插件)cnpm
install babel-polyfill -–save

 4858美高梅 19

cnpm  install crypto-js –-save  前后台数据获得时候的加密的3个功能文件 

文件夹。便是项目运维须求借助的财富。然后实施最终一句发号施令(npm run
dev),运维三个端口为8080的服务,项目就能够打开。


 

babel-polyfill
安装后还得配置(build/webpack.base.comf.js文件如下):

vue项目创制完结后,具体的代码写在src文件夹中就可以啊!

4858美高梅 20

插件就不一一举事例了,因为区别体系所需的插件分化,开发者可依照事态来设置。


一、前端代码项目vue打包:

 (cnpm)npm run build

会生成静态文件,在根目录的dist里,里面有个index.html,那是服务器访问的路线钦命到那边就足以访问大家温馨的档次了。但是自身发觉个难题正是生成index.html里引用的css和js的引用路径不对,那时候就需求自身修改一下布署了。

4858美高梅 21

再执行npm run build    即可;

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有