vue脚手架v-cli，第一个vue程序

运行在node服务器上的vue程序

1. v-cli安装
2. 使用webpack构建vue程序
3. 目录介绍
4. webpack将vue打包成js文件

1. v-cli安装

在玩v-cli vue客户端脚手架时，需要安装好node.js，是前端管理js包的工具
正式安装vue-cli脚手架

1. npm install vue-cli -g
2. vue list

如果vue list出不来，注销一下电脑

2. 使用webpack构建vue程序

1、选择一个目录，在此目录下打开cmd窗口，所有步骤如下

vue init webpack myvue # 等待nodejs构建
cd myvue  # 进入myvue目录下
npm install
npm run dev

构建项目时，会填写一些项目的信息，我全选的no，你可以选yes，插件会自动加入到项目

npm install后，可能会出错，按照提示修复就行

运行当前项目，访问下面的端口

访问项目

3. 目录介绍

我这用的是idea打开的文件夹

4. webpack将vue打包成js文件

webpack安装将es6语法打包编译成es5的语法，用于运行

npm install webpack -g  # 打包工具
npm install webpack-cli -g # 客户端工具

前端分模块开发,各个包可以相互引入.通过webpack编译生成一个js文件

hello.js

// es6 语法 exports暴露一个方法
exports.sayHi = function() {document.write('<h3>bitqian666</h3>')
}

main.js

// 导入js文件
let hello = require('./hello')
hello.sayHi()

打包配置

module.exports = {entry: './modules/main.js',output: {filename: './bundle.js'}
}

控制台运行 webpack

生成bundle.js,直接用

vue脚手架v-cli，第一个vue程序相关推荐

Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置
Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置
离线安装vue脚手架，内网安装@vue/cli
公司开发环境使用内网,无法用外网,搭建环境的时候,发现内网系统没有安装vue脚手架,我搜了很多文章,发现他们的方法对我都不适用,然后就自己摸索,最终皇天不负有心人,终于被我安装上了,一下是我内网离线安 ...
【Vue笔记一】第一个Vue程序及其语法
官网介绍:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关注视图层,不仅易于上手,还 ...
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
Vue知识点整理（三）- Vue脚手架（1）- 初始化Vue脚手架、简单分析Vue脚手架结构
目录一.初始化Vue脚手架二.简单分析脚手架结构一.初始化Vue脚手架第一步(仅执行一次):全局安装 @vue/cli 在命令提示符内输入(命令提示符可由 win+R 调出运行界面,输 ...
Vue安装及创建第一个Vue项目
一.安装并配置node.js 下载地址:http://nodejs.cn/download/ (一直选择·next) 二.环境配置(极其重要!!) 1.输入node -v 和 npm -v 检查是否安 ...
Vue学习笔记：创建一个Vue实例
目录 1.访问Vue官网https://cn.vuejs.org,进入学习模块下的教程 2.创建页面index.html 3.通过script标签在head部分引入vue.js 4.在body部分创建 ...
vue日期选择组件_一个Vue组件，为波斯开发人员提供日期选择器
vue日期选择组件 Vue波斯日期选择器 (vue persian datepicker) This is a Jalali date picker component for Vue. 这是Vue的 ...
VUE弹窗加载另一个VUE页面
之前实现了一个功能VUE利用tree-transfer插件实现角色菜单动态设置在这个功能的基础上,进一步完善角色列表Uacter.vue页面,点击[菜单设置]按钮,弹出角色菜单MenuRole.v ...