【4858美高梅】vue开发条件搭建,项目设置失利

By admin in 4858美高梅 on 2019年3月31日

1.安装vue-cli 

【4858美高梅】vue开发条件搭建,项目设置失利。脚手架搭建

# install vue-cli
$ npm install –global vue-cli
# create a new project using the “webpack” template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

4858美高梅 1

Paste_Image.png

设置成功后,用vue -V查看版本

新建项目,并开始化:vue init webpack vue_demo

4858美高梅 2

Paste_Image.png

起头化实现
项目名称:vue_demo
品类描述:a demo for vue
作者:。。。
安装vue-router
动用EsLint(语法检查)
不行使单元测试
进入项目目录,查看起始化的门类文件

4858美高梅 3

Paste_Image.png

此刻项目还不可能运转,供给安装重视包,项目依赖的第2方仓库储存在”package.json”文件中

4858美高梅 4

Paste_Image.png

跻身项目根目录,安装依赖: npm install

4858美高梅 5

Paste_Image.png

安装到位后,项目中会新增一个“node_modules”文件夹,里面存的是体系引用的依赖性项。

运维项目

4858美高梅 6

Paste_Image.png

vue开发工具会运行1个server监听本地8080端口,在浏览器中得以访问。

4858美高梅 7

Paste_Image.png

对从前端,在此以前本身大约没什么兴趣,多个是不希罕js代码风格,二个是css样式调节和测试到吐。然则只写后台,不会点前端,也非常苦逼。于是只好选用一款前端框架学学,又想做到前后端分离,综合以下,选了vue.

vue-cli 是一个官方揭橥 vue.js 项目脚手架,使用 vue-cli 能够长足成立 vue
项目,GitHub地址是:https://github.com/vuejs/vue-cli

npm install vue-cli -g

说实话,看官方文书档案,让小白引入<script
src=”

vue-cli脚手架的优势

有一套成熟的vue项目架构划设想计,能够高效开始化3个Vue项目.
vue-cli是法定协理的三个脚手架,会随本版本实行迭代立异。
vue-cli提供了一套本地的node测试服务器,使用vue-cli自身提供的吩咐,就能够运维服务器。
集成打包上线方案。
还有一些优点,包涵:模块化,转译,预处理,热加载,静态检查和测试和自动化测试等,等大家深远应用下去就会意识vue-cli的强有力之处。

2.起初化项目

对于前端小白,真是不精晓webpack、node.js、npm、脚手架那个实物,用程序员的话便是前端开发环境搭建。作品以window系统做示范,linux、Mac系统基本上大致,好了,进入正题了。

安装node.js

在node.js普通话官网
符合规律下载安装node.js就足以,没有啥样越发须要留意的点(傻瓜式安装)。
在官网下载安装node.js后,就已经自带npm(包管理工科具),不须要其它再展开安装npm了。
设置到位后,能够命令行工具中输入node -v和npm
-v,假若能显得出版本号,就证实安装成功。

vue init webpack project

条件搭建

说一下营造vue项指标几个步骤,跟着那多少个步骤搭建转眼条件,创设出三个足以运维起来的vue程序,基本上就入门第②步了:

安装node.js
安装webpack
设置vue-cli脚手架构建筑工程具
项目创设

安装Tmall镜像

cnpm(Tmall镜像)相关:
那是七个完完全全 npmjs.org 镜像,是用来一块npm下边包车型客车模块。
cnpm的共同频率为 10分钟(新公布的模块有滞后性,同步是急需时日的,急不可待的能够利用npm)。
设置cnpm的案由:npm的服务器是国外的,所以有时大家设置“模块”会很非常的慢非常慢超级慢。
cnpm的功能:Taobao镜像将npm上面的模块同步到境内服务器,进步大家设置模块的年华。

此时报错:vue-cli · Failed to download repo vuejs-templates/webpack:
tunneling socket could not be established, cause=connect ECONNREFUSED
127.0.0.1:8118

一、安装node.js

从node.js官网下载并设置node,安装进度非常粗大略,一路“下一步”就足以了(傻瓜式安装)。安装到位之后,打开命令行工具(win+r,然后输入cmd),输入
node -v,如下,假使出现相应的本子号,则注明安装成功。

C:\Users\g580>node -v
v9.8.0

设置node.js后,就已经自带npm(包管理工科具)了,查看npm版本号使用命令 npm
-v,如下:

  C:\Users\g580>npm -v
  v5.6.0

设置形式:打开命令行工具,输入命令行:

$ npm install -g cnpm
–registry=https://registry.npm.taobao.org
cnpm使用方法:
$ cnpm install [name]

安装模块的时候,将npm换到cnpm就行,国内广大coder都以行使cnpm的,个人提议我们都装一下,附上:Taobao镜像网址

4858美高梅 8

二、安装webpack

前边npm(包管理工科具)已经设置成功了,后续的操作都利用npm命名来操作。
打开命令行工具输入:npm install webpack
-g,-g表示全局安装,安装到位之后输入 webpack
-v,如下,出现相应的版本号,则印证安装成功。

  C:\Users\g580>webpack -v
  v4.1.1

安装webpack

设置情势:打开命令行工具,输入命令行:

npm install webpack -g

安装成功后输入webpack -v,假设出现相应的本子号,则证实安装成功。

缓解方案:查看npm设置

叁 、安装vue-cli脚手架创设筑工程具

开拓命令行工具输入:npm install vue-cli -g,安装到位之后输入 vue
-V(注意是大写的“V”),如下,出现相应的本子号,则表达安装成功。

  C:\Users\g580>vue -V
  v2.9.3

设置vue-cli脚手架构建筑工程具

安装方式:全局安装,随便叁个文书夹,输入命令行:

npm install vue-cli -g

设置到位以往,输入指令行vue -V查看版本号,出现相应获得版本号即为打响:

npm config ls -l
④ 、vue-cli营造项目

经过上述三步,起先的环境基本季春经搭建好了,下边就足以塑造和开首化vue项目了。

通过vue-cli,初始化vue项目

1。新建三个vuetext(项目名)文件夹来放置项目,
在新建文件夹的上超级文件夹右键打开命令行工具,输入命令行:

vue init webpack vuetext1(项目名)
注:项目名不可能大写,不能动用中文

解释一下这么些命令,这几个命令的情趣是伊始化二个vue项目,其中webpack是创设筑工程具,也正是任何项目是依照webpack的。当中vuetext1是漫天项目文件夹的称呼,这一个文件夹会自动生成在您钦赐的目录中。

2。以下是脚手架安装进程(安装步骤解析在图片上面)
vue-cli开首化项目选用配置详细分析

$ vue init webpack vuetext1———————
安装vue-cli,起先化vue项目标指令
? Target directory exists. Continue? (Y/n)
y———————找到了vuetext1那一个目录是不是要接二连三
? Target directory exists. Continue? Yes
? Project name
(vuetext1)———————项目标称呼(暗中同意是文件夹的称呼),ps:项指标称谓无法有大写,不可能有普通话,不然会报错
? Project name vuetext1
? Project description (A Vue.js
project)———————项目描述,可以自身写
? Project description A Vue.js project
? Author (OBKoro1)———————项目创设者
? Author OBKoro1
? Vue build (Use arrow
keys)——————–选择打包形式,有三种办法(runtime和standalone),使用默许即可
? Vue build standalone
? Install vue-router? (Y/n)
y——————–是或不是安装路由,一般都要设置
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n)
n———————是或不是启用eslint检查和测试规则,那里个人建议选no,因为时常会各类代码报错,新手仍旧不安装好
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha?
(Y/n)——————–是还是不是安装单元测试
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
y)——————–是否安装e2e测试
? Setup e2e tests with Nightwatch? Yes
4858美高梅,vue-cli · Generated “vuetext1”.
To get started:)——————–怎样开始
cd vuetext1)——————–进入你安装的体系
npm install)——————–安装项目重视
npm run dev)——————–运转品种
Documentation can be found at
https://vuejs-templates.github.io/webpack)——————–vue-cli——————–vue-cli)官方文档

3.哪些运营项目

1.进去你刚才创造在vuetext1档次的公文夹里面(cd vuetext1)。
2.装置项目正视。命令行:npm
install。前边在类型先河化的时候,已经存在了package.json文件,直接运用npm
install 安装项目所供给的借助,不然项目不能够科学运维(最佳利用应用 cnpm
安装信赖,cnpm install)。
3.开头项目。在vuetext1目录运维命令行npm run
dev,运营服务,服务运转成功后浏览器会暗中认可打开八个“欢迎页面”。
建议将端口号改为不常用的端口。其它笔者还将 build 的门道前缀修改为 ‘ ./
‘(原本为 ‘ / ‘),是因为包装之后,外部引入 js 和 css 文件时,要是路径以
‘ / ‘
开始,在地方是不可能找到呼应文件的(服务器上没难题)。所以假使急需在地头打开包装后的文书,就得修改文件路径。

4.打包上线

温馨的档次文件都亟待停放 src 文件夹下
品类支出成功未来,能够输入 npm run build 来进展包装工作

npm run build

装进完毕后,会生成 dist
文件夹,若是已经修改了文件路径,能够一贯打开当三步跳件查看
品种上线时,只须要将 dist 文件夹放到服务器就行了。

察觉果然有失水准

4.1 新建一个工作效能用于目录(小编的是workplace,你轻易)大概选取三个已存在的目录 用于存放项目

4858美高梅 9

4..2 打开命令工具,进入这一个工作目录,输入指令行vue init webpack 项目名:
  C:\Users\g580>workplace>vue init webpack project(项目名)

注:项目名不能够大写,不可能动用中文,使用上述命令初步化一个vue项目,当中webpack是营造筑工程具,project是成套项目文件夹的称谓,这些文件夹会自动生成在你的工作目录中。下边是营造进程:

$ vue init webpack project--------------------- 安装vue-cli,初始化vue项目的命令
? Target directory exists. Continue? (Y/n) y---------------------找到了project这个目录是否要继续
? Target directory exists. Continue? Yes
? Project name (project)---------------------项目的名称(默认是文件夹的名称)
? Project name project
? Project description (A Vue.js project)---------------------项目描述,可以不写
? Project description A Vue.js project
? Author (OBKoro1)---------------------项目创建者
? Author OBKoro1 
? Vue build (Use arrow keys)--------------------选择打包方式,有两种方式(runtime和standalone),回车默认即可
? Vue build standalone
? Install vue-router? (Y/n) y--------------------是否安装路由,一般都要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则,这里选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试 
? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vuetext1".
To get started:)--------------------如何开始
 cd project)--------------------进入你安装的项目
 npm install)--------------------安装项目依赖
 npm run dev)--------------------运行项目
Documentation can be found at https://vuejs-templates.github.io/webpack)

塑造完毕,即可看见项目了,结构如下,也便是project文件下的公文:

4858美高梅 10

image.png

剔除代理:

4.3 安装项目重视

进入project文件夹,shift+右键,选拔菜单:在那边打开命令窗口,即可打开cmd命令工具。也许直接采取命令
cd 进入project文件夹。输入指令:

C:\Users\g580>project>npm install
npm config delete http-proxy
4.4 运营品种

进去project文件夹,shift+右键,选取菜单:在此处打开命令窗口,输入指令:

C:\Users\g580>project>npm run dev

履行到位:

4858美高梅 11

image.png

开辟浏览器,输入地点:http://localhost:8080,先不要猴急关闭命令工具哟,因为在本土运转,关了就运维不了了。

4858美高梅 12

image.png

假使没有出现上图的话,恐怕你的8080端口被占用了,能够在config/index.js元帅dev中的port改为别的值。

到此,用脚手架创设vue项目终止。
读书vue.js提出还是先读书和询问一下html、css、js这一个有关文化,等领悟和询问了,再来深刻学习js会更好。

重新查看,没有了。

4858美高梅 13

开首化项目 vue init webpack project大功告成

vue init webpack project

4858美高梅 14

切换成project目录,急迅npm start 运维你的花色吧!

npm start

4858美高梅 15

发表评论

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

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