The first vue-cli

What is vue-cli

Vue-cli a scaffolding provided by the official, used to quickly generate a project template vue

Pre-defined directory structure and the underlying code, like when you create a Maven project can choose to create a skeleton project, this project is the scaffolding skeleton, the more rapid development of our

The main function

• Unified directory structure
• Local Debugging
• Hot deployment
• unit test
• Integrated on-line package

Environmental needs

• Node.js:  http://nodejs.cn/download/
  installed next to no brain is like, installed in their own environment directory
  

Confirm successful installation nodejs

 

• 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)

# - G is the global install 
npm install CNPM -g

 

Installation location: C:\Users\Administrator\AppData\Roaming\npm

---

 

Installation vue-cli

VUE-cli -g install CNPM 

# test whether the installation was successful 
vue list

 

 

Environment installed - get to the point - to create a vue-cli application

1. Before you create a Vue project, let's just create an empty folder on your computer. This folder is used to store vue-cli project. In order to facilitate the management
   after creating a folder, using the Administrator cmd to open the terminal and into this directory, do the following
2. Vue create an application based on a template webpack
   

   # Myvue here is the name of the project, according to their needs can be named 
   # project name not to have capital, this project will generate a folder path to your current cmd terminal is located 
   vue init webpack myvue

    

Description:

• Project name: project name, press Enter to default
• Project description: project description, the default press Enter
• Author: Author project, the default press Enter
• (The latest version here one more step, select the first option: install the compiler and run environments)
• Install vue-router: is installed vue-router, choose not to install n (need to manually add the late)
• Use ESLint to lint your code: whether to use ESLint do code inspections, n choose not to install (the latter need to be added manually)
• Set up unit tests: unit tests related, choose not to install n (the latter need to be added manually)
• Setup e2e tests with Nightwatch: unit testing related, choose not to install n (need to manually add the late)
• Should we run npm install for you after the project has been created: to create a direct initialization is complete, select n, we performed manually; operating results!

Initialize and run

# Proceed to the next project created directory 
cd myvue 
# initialize 
npm install 
# start vue-cli project 
npm run dev

　　

After you install and run successfully in a browser enter: HTTP: // localhost : 8080

 

 

 

 

Vue-cli directory structure

 

 

• build and config: WebPack profile
• node_modules: used to store installation npm install dependencies
• src: source directory project
• static: static resource files
• .babelrc: Babel profile, the main role is to convert ES5 ES6
• .editorconfig: Configuration Editor
• eslintignore: need to ignore the grammar checker profile
• .gitignore: git ignore profile
• .postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
• index.html：首页，仅作为模板页，实际开发时不使用

• package.json：项目的配置文件

  • name：项目名称
  • version：项目版本
  • description：项目描述
  • author：项目作者
  • scripts：封装常用命令
  • dependencies：生产环境依赖
  • devDependencies：开发环境依赖
  • 

     

     

src 目录

　　src 目录是项目的源码目录，所有代码都会写在这里

main.js

　　项目的入口文件，我们知道所有的程序都会有一个入口

App.vue

　　在 vue 中，每个 以 .vue 结尾的文件称为 单文件组件，本质上和  Vue.component("name",{   ...... });  这样定义一个组件没有什么区别