（1）Vue 学习----脚手架、webpack

Vue 入门文章

https://cn.vuejs.org/v2/guide/instance.html

 

1、安装脚手架

使用下列任一命令安装这个新的包：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

 

用这个命令来检查其版本是否正确 (3.x)：

vue --version
# OR
vue -V

 

2、WebPack

webpack是前端资源模块化管理和打包工具，可将松散的模块按依赖和规则打包成符合生产环境部署的前端资源。可将按需加载的模块进行代码分隔并进行异步加载。通过loader的装换，任何形式的资源都可视作模块，如CommonJS模块、AMD模块、ES6模块、CSS、图片、JSON、CoffeeScript、LESS等。webpack是一个现代JS应用程序的静态模块打包器（module bundle）。当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

使用一下命令安装

//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack

3、创建模板项目

// 安装vue-cli
npm install -g @vue/cli-init


// 创建vue webpack模板项目
vue init webpack projectName

? Project name manager      -------------------项目名称
? Project description A Vue.js project     ------------------- 项目描述及
? Author ------------------- 作者信息
? Vue build standalone                
? Install vue-router? Yes-------------------是否安装路由
? Use ESLint to lint your code? Yes----------使用ESLint，相当管理代码，风格统一处理，各种检测 （类似js严格检查）n忽略
? 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

 

执行命令后等待几分钟。

启动

// 进入项目目录
cd manager

// 启动
npm run dev

启动成功

项目目录说明
# build  webpack 编译的配置文件
# config 项目核心配置文件
# node_modules 项目依赖模块，可以删除（安装npm install）
# src       项目模块
  router 路由
  components 自定义组件
  main.js 入口
  App.vue 模板组件
# static 全局静态文件
# .babelrc 转码器，将es6,es7的代码解析为浏览器认识的代码
# .editorconfig 配置文件  
#  index.html 初始化vue容器
# package.json 项目依赖(类似maven中的pom.xml) ^表示版本最高

 

1、修改端口

config/index.js，修改port

2、启动后自动打开浏览器

config/index.js，修改autoOpenBrowser为true