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前端项目,编译,发布的更多相关文章

  1. 用Vue创建一个新的项目

    vue的安装 Vue.js不支持IE8及以下版本.因为Vue.js使用了ECMAScript5特性,IE8显然不能模拟.Vue.js支持所有兼容ECMAScript5的浏览器. 在用Vue.js构建大 ...

  2. 开始创建一个 Vue 项目

    开始创建一个 Vue 项目 安装 nodejs 略 安装 npm 默认安装时自带了 npm 安装 cnpm 为了更快的下载组件,使用cnpm,cnpm 是淘宝前端的镜像. 使用 npm 安装 cnpm ...

  3. 创建一个vue项目的过程

    创建一个vue项目: 1.首先从UI手上拿到PSD设计图,然后看设计搞的内容,需要做个大概的页面布局 2.做vue之前不许安装node,因为做vue项目要和node结合使用 3.然后安装vue脚手架: ...

  4. 使用vue-cli创建一个vue项目

    安装vue-cli npm install -g @vue/cli 1, 使用vue创建一个项目 vue create luffy 2, 安装所需的插件 npm install vue-router ...

  5. vue3官网介绍,安装,创建一个vue实例

    前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...

  6. 创建一个 Vue 的实例

    每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({         // 选项 }) 选项:el.data.methods el: 类型: ...

  7. 创建一个vue实例

    创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue ...

  8. maven 学习---用Eclipse创建一个Maven Web项目

    下面是使用 Eclipse 来创建一个Maven Web项目的说明.这是相当简单的. 现在让我们开始吧! 1: 启动 Eclipse, 点击 File->New->Other 2: 在弹出 ...

  9. 如何用Maven创建一个普通Java项目

    一下内容包括:用Maven创建一个普通Java项目,并把该项目转成IDEA项目,导入到IDEA,最后把这个项目打包成一个jar文件. 有时候运行mvn命令失败,重复运行几次就OK了,无解(可能因为网络 ...

随机推荐

  1. socket+django

    1.socket 网络上任意两个程序之间要进行通信,需要依靠socket(端口).socket封装了TCP/IP协议,让网络通信基于TCP/IP协议的形式实现. socket可以翻译为插座,那么一个服 ...

  2. php项目------浏览器导航开发

    最近项目不是很急,把以前做的php项目分享一些给大家,希望对各位有所帮助:很简单的一个项目,本人用来练习ThinPHP框架的. 浏览器导航开发,php+mysql+apache,ThinkPHP3.2 ...

  3. Hololens 开发环境配置(转)

    转自 Vangos Pterneas, 4 Apr 2016 CPOL 5.00 (1 vote) vote 1vote 2vote 3vote 4vote 5 The past few days h ...

  4. (转)(HR面试)最常见的面试问题和技巧性答复

    (HR面试)最常见的面试问题和技巧性答复 1.请你自我介绍一下你自己? 回答提示:一般人回答这个问题过于平常,只说姓名.年龄.爱好.工作经验,这些在简历上都有.其实,企业最希望知道的是求职者能否胜任工 ...

  5. Deep Learning of Graph Matching 阅读笔记

    Deep Learning of Graph Matching 阅读笔记 CVPR2018的一篇文章,主要提出了一种利用深度神经网络实现端到端图匹配(Graph Matching)的方法. 该篇文章理 ...

  6. dp练习(9)——最大乘积

    1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Desc ...

  7. 78. Subsets 90. Subsets II

    1. Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset m ...

  8. spring--boot数据库增删改查

    spring--boot数据库增删改查 数据库配置:(必须配置),我写的文件是yml的,和properties是相同的 1 spring: 2 datasource: 3 driver-class-n ...

  9. spring cloud图形化dashboard是如何实现指标的收集展示的

    spring cloud图形化dashboard是如何实现指标的收集展示的 1.dashboard图形化界面入口 http://localhost:10000/hystrix.stream 说明:端口 ...

  10. zk客户端的ClientCnxn类

    ClientCnxn是客户端的类:该类管理zk客户端的socket io,维持一个可用服务器的列表. //ClientCnxn类 private final LinkedList<Packet& ...