【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了,无解(可能因为网络 ...
随机推荐
- 【备档】客户端自动化(主Android Appium + python
之前做分享写的文档,备档~ 0.移动客户端自动化简介 客户端自动化测试的本质 定位对象 · 操作对象 · 校验对象 对象的定位应该是自动化测试的核心,要想操作.校验一个对象,首先应该识别这个对象. 一 ...
- SpringBoot中的数据库连接池
内置的连接池 目前Spring Boot中默认支持的连接池有dbcp,dbcp2, tomcat, hikari三种连接池. 数据库连接可以使用DataSource池进行自动配置. 由于Tomcat数 ...
- OC 属性关键字
// 属性关键字 /* 1.ARC下(自动管理内存,自动引用计数)(IOS) strong,weak ----------------------------------------- 2.MRC下( ...
- C语言描述队列的实现及操作(数组实现)
一.静态数组实现 1.队列接口 #include<stdio.h> // 一个队列模块接口 // 命名为myqueue.h #define QUEUE_TYPE int // 定义队列类型 ...
- React教程-初入
学习了React很久,一直没有机会总结下,最近打算写一个简单的React,希望让初学者一看就懂,不走弯路,我尽量写的简明点好了开始吧!首页我们要利用npm安装 react(当然你也可以用引用方式)跟着 ...
- dom4j+XPath
body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...
- 团队作业之现场UML设计
项目UML设计(团队) 团队信息 团队名:第三视角 各成员学号及姓名 姓名 学号 博客链接 张扬(组长) 031602345 http://www.cnblogs.com/sxZhangYang/p/ ...
- python 元组(tuple)
面试python我想每个人都会被问一个问题,就是python中的list和tuple有什么区别? 一般情况下,我会回答,list元素可变,tuple元素不可变(书上或者其他的博客都是这么写的),一般情 ...
- python 复制/移动文件
用python实现将某代码文件复制/移动到指定路径下. 场景例如:mv ./xxx/git/project1/test.sh ./xxx/tmp/tmp/1/test.sh (相对路径./xxx/tm ...
- http请求报头
客户请求的处理:Http请求报头 创建高效servlet的关键之一,就是要了解如何操纵超文本传输协议(HypeText TransferProtocol, HTTP). HTTP请求报头不同于前一章的 ...