vue脚手架
安装node下载软件 一路默认安装(配置环境变量)
修改下载源 npm config set registry http://registry.npm.taobao.org/
安装vue npm install -g @vue/cli
创建工程 vue create vue-demo
一、please pick preset 选择预设
default 默认
Manualy 手动
二、 Check the features needed for your project: 为工程选择特性
选 babel、 router、vuex、 css-process
Bable 将 ES6 转 ES5 为了 浏览器能识别
TypeScript 更高级的js, js的超级, 添加了面向对象的实现
PWA 原生的移动端支持
Router 路由网址
VUEX 组件传参
CSS Pre-processors CSS 的预处理器
Linter / Formatter 语法检查器
Unit Testing 端端测试
三、 Use history mode for router? 使用history 模式路由
选择 N
History 特点: 在路由中没有#号
Hash 模式: 路由中有#号, 只刷新后面内容
四、Pick a CSS pre-processor 选择css预处理器
Less 是 CSS的预处理工具
五、 Where do you prefer placing config for Babel, ESLint, etc 模块配置放在那儿
In package.json
六、 Save this as a preset for future projects? 是不是要保存预设
N 新手建议不保存
安装成功之后会有两行蓝色提示
首先输入cd py1911-demo
其次输入 npm run serve
成功之后就可以在浏览器输入 http://localhost:8080/#/
以上是vue脚手架的安装
以下是vue脚手架的目录结构
Node_modules 安装了 1109 个js模块 以后安装的模块也会放到这里,不需要关注
Public 此处存放静态资源
Favicon.ico
Index.html 页面入口
Src 编写代码的地方
Assets 资源 可以存放图片等静态资源
Components 组件 在其中编写组件
三部分 template 内部编写Html
Script 内部编写Js代码
Style 内部编写Css样式**
Router 路由网址
Store 数据状态管理器,用于组件传参
views 视图 页面
App.vue 主组件入口
Main.js 主逻辑入口
.gitignore git 工具忽略列表
babel.config Babel 的配置文件(ES6 转 ES5 参考)
package.json 项目工具的配置信息
package-lock 1109个包相互依赖关系
README.md 帮助文档