【vue】创建一个vue前端项目,编译,发布
npm: Nodejs下的包管理器。
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)
【一】mac检查是否安装node.js
nvm --version
=>0.33. node -v
=>v10.7.0
【二】安装web-pack -g
cnpm install webpack -g
【三】安装vue-cli
cnpm install --global vue-cli
【四】创建一个vue项目。
$ vue init webpack my-self-project ? Target directory exists. Continue? Yes ? Project name my-self-project
? Project description A Vue.js project
? Author shangxiaofei <shangxiaofei@meituan.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "my-self-project".
【五】构建项目,进入项目的根目录,执行如下命令
$ cnpm install
✔ Installed packages
✔ Linked latest versions
Downloading https://cdn.npm.taobao.org/dist/chromedriver/2.41/chromedriver_mac64.zip
Saving to /var/folders//_q18xrkj2j7bhklb_kpgfdx00000gn/T/chromedriver/chromedriver_mac64.zip
Received 782K...
Received 1564K...
Received 2346K...
Received 3128K...
Received 3910K...
Received 4691K...
Received 5473K...
Received 5625K total.
Extracting zip contents
Copying to target path /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/_chromedriver@2.41.@chromedriver/lib/chromedriver
Fixing file permissions
Done. ChromeDriver binary available at /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/_chromedriver@2.41.@chromedriver/lib/chromedriver/chromedriver
✔ Run scripts
Recently updated (since --): packages (detail see file /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/.recently_updates.txt)
✔ All packages installed ( packages installed from npm registry, used 8s(network 3s), speed .91kB/s, json (.32kB), tarball .78kB)
【六】发布项目
cnpm run dev > my-self-project@1.0. dev /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js % emitting DONE Compiled successfully in 3121ms :: I Your application is running here: http://localhost:8080
【vue】创建一个vue前端项目,编译,发布的更多相关文章
- 用Vue创建一个新的项目
vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟.Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大 ...
- 开始创建一个 Vue 项目
开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...
- 创建一个vue项目的过程
创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...
- 使用vue-cli创建一个vue项目
安装vue-cli npm install -g @vue/cli 1, 使用vue创建一个项目 vue create luffy 2, 安装所需的插件 npm install vue-router ...
- vue3官网介绍,安装,创建一个vue实例
前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...
- 创建一个 Vue 的实例
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 选项:el.data.methods el: 类型: ...
- 创建一个vue实例
创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue ...
- maven 学习---用Eclipse创建一个Maven Web项目
下面是使用 Eclipse 来创建一个Maven Web项目的说明.这是相当简单的. 现在让我们开始吧! 1: 启动 Eclipse, 点击 File->New->Other 2: 在弹出 ...
- 如何用Maven创建一个普通Java项目
一下内容包括:用Maven创建一个普通Java项目,并把该项目转成IDEA项目,导入到IDEA,最后把这个项目打包成一个jar文件. 有时候运行mvn命令失败,重复运行几次就OK了,无解(可能因为网络 ...
随机推荐
- php入门之数据类型
String(字符串), Integer(整型), Float(浮点型), Boolean(布尔型), Array(数组), Object(对象), NULL(空值),资源. 返回类型 getType ...
- EF学习-获取实体框架01
实体框架由 EF 设计器(包含在 Visual Studio 中)和 EF Runtime(在 NuGet 上提供)组成. EF 设计器包含在 Visual Studio 中 最新版本的实体框架设计器 ...
- Up and Down the Tree CodeForces - 1065F (树形dp)
链接 题目大意:给定$n$结点树, 假设当前在结点$v$, 有两种操作 $(1)$移动到$v$的子树内任意一个叶子上 $(2)$若$v$为叶子, 可以移动到距离$v$不超过$k$的祖先上 初始在结点$ ...
- ssh The authenticity of host '10.11.26.2 (10.11.26.2)' can't be established
The authenticity of host '10.11.26.2 (10.11.26.2)' can't be established. ECDSA key fingerprint is SH ...
- 『Sklearn』数据划分方法
原理介绍 K折交叉验证: KFold,GroupKFold,StratifiedKFold, 留一法: LeaveOneGroupOut,LeavePGroupsOut,LeaveOneOut,Lea ...
- python-day37--协程
一. 协程介绍 单线程下实现并发,提升运行效率, 1.自己控制切换,保存状态 2.遇到I/O切 (单纯的CPU切没意义,只有在遇到I/O的时候切才有效率) 一句话说明什么是线程:协程是 ...
- stl算法:next_permutation剖析
在标准库算法中,next_permutation应用在数列操作上比较广泛.这个函数可以计算一组数据的全排列.但是怎么用,原理如何,我做了简单的剖析. 首先查看stl中相关信息.函数原型: templa ...
- 字符串 dfs
1222: FJ的字符串 [水题] 时间限制: 1 Sec 内存限制: 128 MB 提交: 52 解决: 9 状态 题目描述 FJ在沙盘上写了这样一些字符串: A1 = “A” A2 = “ ...
- 10个CSS简写/优化技巧-摘自网友
10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CS ...
- OC 文件基本操作
// // main.m // oc_13 // // Created by ma c on 15/12/17. // Copyright (c) 2015年 博文科技. All rights res ...