What is vue-cli
Vue-cli a scaffolding provided by the official, used to quickly generate a vue project templates;
Pre-defined directory structure and the underlying code, like when we create Maven project can choose to create a skeleton project, this project is the scaffolding framework, our developers more quickly;
The main features:
- Unified directory structure
- Local Debugging
- Hot deployment
- unit test
- Integrated on-line package
Environmental needs
1. Node.js : http://nodejs.cn/download/
Installation is no brain like the next step, the installation in their own environment directory
2. Git : https://git-scm.com/downloads
Mirror : https://npm.taobao.org/mirrors/git-for-windows/
Confirm nodejs successful installation:
- input under cmd
node -v
, see if can correctly print publication of this number can be! - input under cmd
npm-v
, see if can correctly print publication of this number can be!
This npm, is a package management tool, apt and software under linux install almost!
Taobao mirror installed Node.js accelerator (cnpm)
This way, then, download much faster -
# -G is installed globally
npm install cnpm -g
# Or use the following statement to solve the problem of slow npm
npm install --registry=https://registry.npm.taobao.org
~ Installation process may be a bit slow, be patient! While the cnpm installation, but as little as possible!
Installation location:C:\Users\Administrator\AppData\Roaming\npm 这个是系统自动放到这个目录中,即使你安装nodejs时指定了目录,这个目录是需要的系统环境,每个软件都会有
Installation vue-cli
The first application vue-cli
1. Create a Vue project, we just create an empty folder on the computer, I am here to create a new directory on the D drive
D:\Project\vue-study
;
2. Create a vue application template-based webpack
# Myvue here is the project name, you can named according to their needs
vue init webpack myvue
一路都选择no即可;
说明:
- Project name:项目名称,默认 回车 即可
- Project description:项目描述,默认 回车 即可
- Author:项目作者,默认 回车 即可
- Install vue-router:是否安装 vue-router,选择 n 不安装(后期需要再手动添加)
- Use ESLint to lint your code:是否使用 ESLint 做代码检查,选择 n 不安装(后期需要再手动添加)
- Set up unit tests:单元测试相关,选择 n 不安装(后期需要再手动添加)
- Setup e2e tests with Nightwatch:单元测试相关,选择 n 不安装(后期需要再手动添加)
- Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行;运行结果!
初始化并运行
在项目路径下,执行以下命令
npm install
npm run dev
执行完成后,目录多了很多依赖
安装并运行成功后在浏览器输入:http://localhost:8080
效果
Vue-cli目录结构
我们用IDEA,open刚才的项目!
- build 和 config:WebPack 配置文件
- node_modules:用于存放 npm install 安装的依赖文件
- src: 项目源码目录
- static:静态资源文件
- .babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5
- .editorconfig:编辑器配置
- eslintignore:需要忽略的语法检查配置文件
- .gitignore:git 忽略的配置文件
- .postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法
- index.html:首页,仅作为模板页,实际开发时不使用
-
package.json:项目的配置文件
- name:项目名称
- version:项目版本
- description:项目描述
- author:项目作者
- scripts:封装常用命令
- dependencies:生产环境依赖
- devDependencies:开发环境依赖
src 目录
src
目录是项目的源码目录,所有代码都会写在这里
main.js
项目的入口文件,我们知道所有的程序都会有一个入口
import Vue from 'vue'
:ES6 写法,会被转换成 require("vue"); (require 是 NodeJS 提供的模块加载器)import App from './App'
:意思同上,但是指定了查找路径,./ 为当前目录Vue.config.productionTip = false
:关闭浏览器控制台关于环境的相关提示-
new Vue({...})
:实例化 Vueel: '#app'
:查找 index.html 中 id 为 app 的元素template: '<App/>'
:模板,会将 index.html 中 <div id="app"></div> 替换为 <App />components: { App }
:引入组件,使用的是 import App from './App' 定义的 App 组件;
App.vue
- template:HTML 代码模板,会替换 <App /> 中的内容
- import HelloWorld from './components/HelloWorld':引入 HelloWorld 组件,用于替换 template 中的 <HelloWorld/>
-
export default{...}:导出 NodeJS 对象,作用是可以通过 import 关键字导入
- name: 'App':定义组件的名称
- components: { HelloWorld }:定义子组件
在hello,Vue中,关于 <style scoped> 的说明:CSS 样式仅在当前组件有效,声明了样式的作用域,是当前的界面私有的!