一、使用 vue-cli(脚手架)搭建项目

1) Vue-cli 是 vue 官方提供的用于搭建基于 vue+webpack+es6 项目的脚手架工具

2) 在线文档:https://github.com/vuejs/vue-cli

3) 操作: (mypro 是自定义名称)

npm install -g vue-cli 

vue init webpack mypro

cd mypro

npm install npm run dev

访问: localhost:

二、项目结构分析

mypro

|-- build : webpack 相关的配置文件夹(基本不需要修改)

|-- config: webpack 相关的配置文件夹(基本不需要修改)

  |-- index.js: 指定的后台服务的端口号和静态资源文件夹

|-- node_modules

|-- src : 源码文件夹

  |-- main.js: 应用入口 js

|-- static: 静态资源文件夹

|-- .babelrc: babel 的配置文件

|-- .editorconfig: 通过编辑器的编码/格式进行一定的配置

|-- .eslintignore: eslint 检查忽略的配置

|-- .eslintrc.js: eslint 检查的配置

|-- .gitignore: git 版本管制忽略的配置

|-- index.html: 主页面文件

|-- package.json: 应用包配置文件

|-- README.md: 应用描述说明的 readme 文件

三、编码测试与打包发布项目

1) 编码测试

  npm run dev

  访问:http://localhost:8080 编码, 自动编译打包(HMR), 查看效果

2) 打包发布

  npm run build

  npm install -g serve

  serve dist

  访问:http://localhost:5000

使用 vue-cli(脚手架)搭建项目的更多相关文章

  1. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  2. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  3. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  4. vue简单的脚手架搭建项目

    第一步 node环境安装 1.如果本机没有安装node运行环境,下载node安装包进行安装 下载地址:https://nodejs.org/en/或者http://nodejs.cn/ 第二步 nod ...

  5. 1.vue脚手架搭建项目

    前言: 在使用Vue-cli脚手架搭建项目之前,需要安装node.js和npm以及vue-cli. 开始搭建项目: 1.打开cmd win+R 2.转到要搭建的项目路径: g: cd Webapp/v ...

  6. vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...

  7. vue-cli脚手架搭建项目简单入门一

    搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...

  8. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  9. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

随机推荐

  1. js个人笔记简记

    正则表达式 创建正则表达式的两种方法:   Var reg = new RegExp(‘’) Var reg = / a/ 后面三个参数g:全局匹配 i:不区分大小写 m:多行匹配 开头结尾有用 常见 ...

  2. 【2019年版】如何向SAP公司提交Message?

    [2019年版]如何向SAP公司提交Message? 1,浏览器里输入如下网址: ,出现如下界面, 2,点击 'Visit the SAP Support Portal' 按钮.进入如下界面,去菜单M ...

  3. dijit/_WidgetBase

    英文地址:http://dojotoolkit.org/reference-guide/1.10/dijit/_WidgetBase.html 介绍 dijit/_WidgetBase是Dijit包中 ...

  4. PHP代码篇(三)--常用方法

    模块下不间断更新,PHP常用方法,欢迎留言! 一.递归删除指定目录下所有文件及文件夹 /** * 递归删除指定目录下所有文件及文件夹 * @param unknown $path,删除路径 */ fu ...

  5. vscode使用formate格式化less遇到的坑

    就是这个家伙 我的代码 @input-padding-y : 8px;@input-padding-x : 12px; @input-padding-y-lg : @input-padding-y + ...

  6. [Go] gocron源码阅读-判断是否使用root用户执行

    判断是linux系统,并且uid为0,allowRoot是通过命令行传参传进来的,通过flag包解析出来的,可以使用go run node.go -h看到这些参数 && !allowR ...

  7. 九、Swift对象存储服务(双节点搭建)

    九.Swift对象存储服务(双节点搭建) 要求:Controoler节点需要2块空盘 Compute节点需要再加2块空盘 本次搭建采用Controller 和 Compute双节点节点做swift组件 ...

  8. react的路由权限控制

    在使用路由的时候,有的时候我们的界面只能够在登录之后才可以看的到,这个时候就需要使用路由权限控制了 找了资料发现一个就是我使用的方法,一个是高阶组件. 原谅菜鸟看不太懂不会使用高阶组件………… 首先在 ...

  9. 2. Go语言—包概念

    一.包的概念 和python一样,把相同功能的代码放到一个目录,称之为包 包可以被其他包引用(若包中变量/函数被其他包调用,名需大写) main包是用来生成可执行文件,每个程序只有一个main包 包的 ...

  10. 为了Runtime Broke 关了一堆东西

    可是,好像还是不行啊?CPU还是用了 10-20% 还得写这个随笔,怕自己关东西关多了,以后还得回复. https://www.drivereasy.com/knowledge/runtime-bro ...