搭建项目,cli搭建项目

作者:江苏福彩快三计算机网络

安装实现后,能够动用vue -V 查看是或不是安装成功。

设置成功后,使用 cnpm 安装 vue-cli 和 webpack。

个中 webpack 是模板名称,能够到 vue.js 的 GitHub 上查看越来越多的模板

详解Vue使用 vue-cli 搭建项目,vuevue-cli

vue-cli 是贰个官方发表 vue.js 项目脚手架,使用 vue-cli 可以高速创建 vue 项目,GitHub地址是:

 一、 安装 node.js

先是必要设置node景况,能够直接到普通话官方网址

设置到位后,能够命令行工具中输入 node -v 和 npm -v,假诺能展现出版本号,就证实安装成功。

江苏福彩快三 1

 二、安装 vue-cli

设置好了 node,大家能够直接全局安装 vue-cli:

npm install -g vue-cli

可是这种设置情势相当的慢,推荐使用国内镜像来安装,所以我们先安装 cnpm:

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

假定设置战败,可以使用 npm cache clean 清理缓存,然后再重新安装。前边的安装进程中,如有安装退步的情况,也急需先清理缓存

一样能够行使 cnpm -v 查看是还是不是安装成功

江苏福彩快三 2

接下来利用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

流行的 vue 项目模板中,都包蕴 webpack 插件,所以这里能够不设置 webpack

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

江苏福彩快三 3

倘使提醒“不可能辨认 'vue' ” ,有不小概率是 npm 版本过低,能够行使 npm install -g npm 来更新版本

 三、生成项目

第一须要在命令行中步向到品种目录,然后输入:

vue init webpack Vue-Project

中间 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更加多的模板

Vue-Project 是自定义的项目名称,命令实施之后,会在当下目录生成四个以该名称命名的项目文件夹

江苏福彩快三 4

布署达成后,能够看看目录下多出了三个类别文件夹,里面纵使 vue-cli 创立的叁个基于 webpack 的 vue.js 项目

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

cnpm install

接下来运转项目

npm run dev

若是浏览器展开之后,未有加载出页面,有不小或然是地点的 8080 端口被攻克,供给修改一下布局文件 config>index.js

 江苏福彩快三 5

提议将端口号改为有时用的端口。其它笔者还将 build 的门道前缀修改为 ' ./ '(原来为 ' / '),是因为包装之后,外界引进 js 和 css 文件时,借使路线以 ' / ' 最先,在本地是不大概找到相应文件的(服务器上没难点)。所以若是须要在本地张开包装后的文书,就得修改文件路线。

四、打包上线

投机的门类文件都亟待停放 src 文件夹下

品种开荒到位今后,能够输入 npm run build 来开展打包专门的学业

npm run build

包裹达成后,会变卦 dist 文件夹,如若已经修改了文本路径,能够直接展开当和姑件查看

品类上线时,只须求将 dist 文件夹放到服务器就行了。

如上正是本文的全体内容,希望对大家的求学抱有援助,也指望我们多多帮忙帮客之家。

vue-cli 搭建项目,vuevue-cli vue-cli 是二个法定发布 vue.js 项目脚手架,使用 vue-cli 能够火速创立 vue 项目,GitHub地址是:...

通过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. 孔蒂nue? (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
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 文件夹放到服务器就行了。

vue init webpack Vue-demo

花色上线时,只需求将 dist 文件夹放到服务器就行了。

一经提醒“无法甄别 'vue' ” ,有希望是 npm 版本过低,能够动用 npm install -g npm 来更新版本

安装node.js

在node.js粤语官方网址 正常下载安装node.js就足以,未有怎么极其供给注意的点(傻瓜式安装)。
在官方网址下载安装node.js后,就早已自带npm(包管理工科具),无需别的再开始展览设置npm了。
安装达成后,能够命令行工具中输入node -v和npm -v,假使能显示出版本号,就表达安装成功。

设置成功后,使用 cnpm 安装 vue-cli 和 webpack。

安装实现后,能够运用 vue -V 查看是还是不是安装成功。

npm run dev

vue-cli 是三个合法发表 vue.js 项目脚手架,使用 vue-cli 能够一点也不慢创设 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli

江苏福彩快三 6

江苏福彩快三 7

您大概感兴趣的篇章:

  • vue-cli入门之项目结构深入分析
  • 详解vue-cli快捷营造项目以及引进bootstrap、jq
  • 深刻通晓Vue-cli搭建项目后的目录结构探秘
  • Vue学习笔记晋级篇之vue-cli安装及介绍
  • 详解怎么着采用vue-cli脚手架搭建Vue.js项目
  • 安装vue-cli报错 -4058 的消除格局
  • 详解Vue-cli代理消除跨域难点
  • vue学习课程之带您一步步详实分析vue-cli

vue-cli脚手架的优势

有一套成熟的vue项目框架结构设计,能够快捷初叶化贰个Vue项目.
vue-cli是法定匡助的贰个脚手架,会随本版本实行迭代立异。
vue-cli提供了一套本地的node测验服务器,使用vue-cli自身提供的吩咐,就可以运维服务器。
购并打包上线方案。
还应该有部分优点,包蕴:模块化,转译,预管理,热加载,静态检查实验和自动化测量试验等,等大家深入应用下去就能够发觉vue-cli的庞大之处。

四、打包上线

卷入达成后,会变卦 dist 文件夹,假诺已经修改了文本路线,能够直接展开当麻芋果件查看

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

安装webpack

设置方式:展开命令行工具,输入命令行:

npm install webpack -g

安装成功后输入webpack -v,借使出现相应的本子号,则评释安装成功。

一、 安装 node.js

安装好了 node,我们得以一贯全局安装 vue-cli:

配备实现后,能够看看目录下多出了贰个等级次序文件夹,里面就是 vue-cli 成立的贰个依照 webpack 的 vue.js 项目

设置Tmall镜像

cnpm(天猫商城镜像)相关:
那是八个总体 npmjs.org 镜像,是用来一只npm下面的模块。
cnpm的一块频率为 10分钟(新发布的模块有滞后性,同步是亟需时刻的,险象环生的能够行使npm)。
安装cnpm的原故:npm的服务器是异域的,所以有的时候我们设置“模块”会很相当慢比非常的慢一级慢。
cnpm的法力:Tmall镜像将npm下边包车型地铁模块同步到境内服务器,进步我们设置模块的岁月。

第一须要在命令行中步入到项目目录,然后输入:

连串开荒到位今后,能够输入 npm run build 来进展打包工作

建议将端口号改为临时用的端口。别的小编还将 build 的路径前缀修改为 ' ./ '(原来为 ' / '),是因为包装之后,外界引进 js 和 css 文件时,如若路线以 ' / ' 初步,在地点是爱莫能助找到相应文件的(服务器上没难点)。所以一旦要求在地头展开包装后的公文,就得修改文件路线。

设置vue-cli脚手架营造筑工程具

设置方式:全局安装,随意二个文本夹,输入命令行:

npm install vue-cli -g

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

npm run build

下一场步入项目目录(cd Vue-Project),使用 cnpm 安装信赖

cnpm install

安装格局:打开命令行工具,输入命令行:

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

设置模块的时候,将npm换来cnpm就行,国内相当多coder都以选取cnpm的,个人提出大家都装一下,附上:天猫镜像网站

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

四、打包上线

本文由江苏福彩快三发布,转载请注明来源

关键词: 江苏福彩快三