cloudide安装vue

什么是Vue？

Vue是一套用于构建用户界面的渐进式框架，只需要关心view层，轻量快速

vue的二大核心

• 响应式的数据绑定：当数据（model）发生改变，视图（view）可以自动更新，可以不用关心Dom操作，而专心数据操作

• 可组合的视图组件:  把视图view按照功能分成若干基本单元，组件可以一级一级组合整个应用形成倒置组件树，可维护，可重用，可测试

华为云CloudIDE创建实例

cloudide创建实例地址:

1. 创建实例

2. 不创建工程

3.选择New terminal打开控制台

mkdir xxxx 创建一个文件夹

4.打开进入项目文件夹

5.安装vue

npm install -g  vue-cli     全局安装脚手架

vue init  webpack  VueDemo 下载脚手架模板 + 项目名称 

Project name vue_installdemo   项目名称只能小写

ESLint 规范代码，这里选择no

6. 运行Vue

cd vue_installdemo

npm run dev   运行

http://localhost:8080 访问

项目目录：

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

• config：相关的配置文件夹(基本不需要修改)

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

• node_modules： 模块

• src : 源码文件夹

• components: vue 组件及其相关资源文件夹

• App.vue: 应用根主组件

• main.js: 应用入口 js

• static: 静态资源文件夹

• .babelrc: babel 的配置文件

• .eslintignore: eslint 检查忽略的配置

• .eslintrc.js: eslint 检查的配置

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

• index.html: 主页面文件

• package.json: 应用包配置文件

安装运行完毕！ 但是我们测试的时候不能使用localhost来访问

7.vue在cloudide通过外部域名地址访问8080

8.域名访问8080端口出现了

Bad Gateway

1. 修改config里index.js, host为0.0.0.0

2. 修改build里webpack.dev.conf.js，找到 devSever添加

disableHostCheck: true

重新启动项目在访问