1.安装脚手架工具vue-cli（命令行）
- 全局安装vue-cli
Mac打开终端，windows打开命令行工具
输入npm install --global vue-cli
- 创建一个基于webpack 模板的项目
输入 vue init webpack 项目名称
- 输入上述命令后，会询问你如下信息进行配置：
Project name ：项目名称
Project description：项目描述
Author：作者
Vue build：如何构建项目
Install vue-router：是否安装路由
Use ESLint to lint your code：是否使用ESLint来规范我们的代码
Pick an ESLint preset：选择一个ESLint代码规范
Set up unit tests：是否需要自动化单元测试
Setup e2e tests with Nightwatch：是否需要自动化用户界面测试
Should we run 'npm install' for your after the project has been created?(recommend)：在后续安装依赖包是是否使用npm install安装
- 当根据配置执行完成后会提示Project initialization finished!，代表安装项目初始化完成
- 根据提示信息启动项目
cd 项目名称
npm run dev - 项目启动完成 提示Your application is running here: http://localhost:8080
这时 我们在浏览器输入网址，即可看到如下显示
项目启动完成网页展示.png
-
项目目录说明
项目文件列表.png
build：项目webpack配置文件
config：针对开发环境和线上环境的配置文件
node_modules：项目依赖包
src：源代码目录
static：静态资源
.babelrc：JavaScript 语法的编译器
.editorconfig：针对babel的编译，浏览器配置
.eslintignore：针对babel的编译，eslint检测规则配置
.eslintrc.js：针对babel的编译，eslint检测规则配置
.gitignore：git 配置文件
.postcssrc.js：转换成css格式的插件
index.html：整个项目的入口index页，包含根实例的挂载点
package.json：定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）
package-lock.json：其实package-lock就是锁定安装时的包版本号，需要上传到git上，以保证其他人在install时候，大家的依赖版本相同
- src目录下文件介绍
main.js:整个项目入口文件
el：#app
创建了一个vue的实例app让其挂载在index.html的id=app的节点上
components: { App }
注册局部组件APP，APP来源：import App from './App'，即引入当前目录下的APP.vue组件
template: '<App/>'
定义模板为APP组件的内容
即，main中创建vue实例展示的就是APP.vue组件中的内容
APP.vue：单文件组件，包含三部分
第一部分：<template>模板部分
第二部分：<script>逻辑部分
第三部分：<style>样式部分
- 脚手架工具的优点
使用ES6语法
提供单文件组件编码形式
网友评论