npm: Nodejs下的包管理器。

webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。

vue-cli: 用户生成Vue工程模板。(帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装)

【一】mac检查是否安装node.js

  1. nvm --version
  2. =>0.33.
  3.  
  4. node -v
  5. =>v10.7.0

【二】安装web-pack -g

  1. cnpm install webpack -g

【三】安装vue-cli

  1. cnpm install --global vue-cli

【四】创建一个vue项目。

  1. $ vue init webpack my-self-project
  2.  
  3. ? Target directory exists. Continue? Yes
  4.  
  5. ? Project name my-self-project
  6. ? Project description A Vue.js project
  7. ? Author shangxiaofei <shangxiaofei@meituan.com>
  8. ? Vue build standalone
  9. ? Install vue-router? Yes
  10. ? Use ESLint to lint your code? Yes
  11. ? Pick an ESLint preset Standard
  12. ? Set up unit tests Yes
  13. ? Pick a test runner jest
  14. ? Setup e2e tests with Nightwatch? Yes
  15. ? Should we run `npm install` for you after the project has been created? (recommended) npm
  16.  
  17. vue-cli · Generated "my-self-project".

【五】构建项目,进入项目的根目录,执行如下命令

  1. $ cnpm install
  2. Installed packages
  3. Linked latest versions
  4. Downloading https://cdn.npm.taobao.org/dist/chromedriver/2.41/chromedriver_mac64.zip
  5. Saving to /var/folders//_q18xrkj2j7bhklb_kpgfdx00000gn/T/chromedriver/chromedriver_mac64.zip
  6. Received 782K...
  7. Received 1564K...
  8. Received 2346K...
  9. Received 3128K...
  10. Received 3910K...
  11. Received 4691K...
  12. Received 5473K...
  13. Received 5625K total.
  14. Extracting zip contents
  15. Copying to target path /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/_chromedriver@2.41.@chromedriver/lib/chromedriver
  16. Fixing file permissions
  17. Done. ChromeDriver binary available at /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/_chromedriver@2.41.@chromedriver/lib/chromedriver/chromedriver
  18. Run scripts
  19. Recently updated (since --): packages (detail see file /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project/node_modules/.recently_updates.txt)
  20. All packages installed ( packages installed from npm registry, used 8s(network 3s), speed .91kB/s, json (.32kB), tarball .78kB)

【六】发布项目

  1. cnpm run dev
  2.  
  3. > my-self-project@1.0. dev /Users/shangxiaofei/sxfwork/sxfproject3/my-self-project
  4. > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
  5.  
  6. % emitting
  7.  
  8. DONE Compiled successfully in 3121ms ::
  9.  
  10. 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. 【备档】客户端自动化(主Android Appium + python

    之前做分享写的文档,备档~ 0.移动客户端自动化简介 客户端自动化测试的本质 定位对象 · 操作对象 · 校验对象 对象的定位应该是自动化测试的核心,要想操作.校验一个对象,首先应该识别这个对象. 一 ...

  2. SpringBoot中的数据库连接池

    内置的连接池 目前Spring Boot中默认支持的连接池有dbcp,dbcp2, tomcat, hikari三种连接池. 数据库连接可以使用DataSource池进行自动配置. 由于Tomcat数 ...

  3. OC 属性关键字

    // 属性关键字 /* 1.ARC下(自动管理内存,自动引用计数)(IOS) strong,weak ----------------------------------------- 2.MRC下( ...

  4. C语言描述队列的实现及操作(数组实现)

    一.静态数组实现 1.队列接口 #include<stdio.h> // 一个队列模块接口 // 命名为myqueue.h #define QUEUE_TYPE int // 定义队列类型 ...

  5. React教程-初入

    学习了React很久,一直没有机会总结下,最近打算写一个简单的React,希望让初学者一看就懂,不走弯路,我尽量写的简明点好了开始吧!首页我们要利用npm安装 react(当然你也可以用引用方式)跟着 ...

  6. dom4j+XPath

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  7. 团队作业之现场UML设计

    项目UML设计(团队) 团队信息 团队名:第三视角 各成员学号及姓名 姓名 学号 博客链接 张扬(组长) 031602345 http://www.cnblogs.com/sxZhangYang/p/ ...

  8. python 元组(tuple)

    面试python我想每个人都会被问一个问题,就是python中的list和tuple有什么区别? 一般情况下,我会回答,list元素可变,tuple元素不可变(书上或者其他的博客都是这么写的),一般情 ...

  9. python 复制/移动文件

    用python实现将某代码文件复制/移动到指定路径下. 场景例如:mv ./xxx/git/project1/test.sh ./xxx/tmp/tmp/1/test.sh (相对路径./xxx/tm ...

  10. http请求报头

    客户请求的处理:Http请求报头 创建高效servlet的关键之一,就是要了解如何操纵超文本传输协议(HypeText TransferProtocol, HTTP). HTTP请求报头不同于前一章的 ...