运行前置条件：  node   npm

单文件组件 

#全局安装 vue-cli

$ npm install --global vue-cli

#创建一个基于 webpack 模板的新项目

$ vue init webpack  my-project

#安装依赖

$ cd my-project

$ npm run dev

webpack打包工具构造大型项目的开发目录，打包，线上运行

脚手架工具vue-cli，快速构建vue项目，自带webpack各种工具，不涉及技术门槛

nodejs安装时会自动安装npm

vuecli安装前先安装node和npm

安装vue-cli慢怎么办？

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g vue-cli@2.9.6 --save

vue init webpack vueproject

进入到项目目录，cd d:\web\vueproject ，安装element-ui

cnpm i element-ui -S

运行Vue项目

npm run dev

初始化Vue工程项目

初始化vue工程项目

vue init webpack todolist

1、脚手架vue-cli安装与项目创建

• vue-cli安装

npm install --global vue-cli

• 创建一个基于 webpack 模板的新项目

vue init webpack my-project---my-project自定义项目名，通过cd切换项目创建的路径

• 进入项目，安装依赖

cd my-project

npm run dev

• 打开项目网页

http://localhost:8080/

2、vue项目介绍

build 项目配置文件

config开发和线上一些配置文件

node_modules项目依赖

src源代码

static静态资源文件

index .html

src/main.js  项目入口文件

单文件组件，template、script、style三部分组成

npm install -g @vue/cli

vue create vue-cli-demo

参考网址：

https://cli.vuejs.org/

https://cli.vuejs.org/guide/creating-a-project.html#vue-create

全局安装vue-cli

    npm install --global  vue-cli

创建一个基于webpack 的项目 my-project

    vue init webpack my-project

安装项目依赖

    cd my-project

    npm run

Vue-cli的简介与使用 (脚手架工具)

    需要安装脚手架工具，使用npm命令，去vue官网有教程。

1. build目录下放置的是项目的webpack配置文件，可以不动
   

2. config是针对线上环境和开发环境的配置文件，也可以不动
   

3. node_modules 指的是项目的依赖

4. src 指的是源代码放置的目录

5. static放置的是静态的资源

6. src中的main.js文件是整个项目的入口文件

7. 
   

全局安装vue-cli 

npm install --global vue-cli 

创建一个基于webpack模板的新项目

vue init webpack my-project

进入到这个文件夹

cd my-project 

npm run dev或者 npm run start 启动项目

一个组件必须包含三个部分 

<template></template>注意template里面最外面只有一个div

<script></script>

<style></style>

node_modules指的是项目的依赖

安装vue-cli的命令

安装Vue-cli 以及vue-cli的环境配置

npm install --global vue-cli

创建一个基于webpack模板的新项目

vue init webpack my-project

安装依赖

cd my-project

npm run dev

进入桌面命令

cd desktop

先去安装node,安装完node自动安装npm

vue安装（需要先安装node，，略）

用脚手架工具创建项目

1、npm install -global vue-cli          全局安装vue脚手架工具  vue-cli

2、vue init  webpack   my_project   创建一个基于webpack模版的新项目

3、cd my-project   进入到项目目录

4、npm run dev   运行项目

主要编写scr目录下的文件，main.js是整个项目的入口文件

安装vue-cli参考

https://blog.csdn.net/wisewrong/article/details/55212684

关于vue-cli下载成功但项目创建不成功的问题，看到有很多同学有这个问题，这里有我的解决办法，希望能帮到大家

https://blog.csdn.net/qq_41594043/article/details/90411988

1.环境配置

0、安装node.js

官网下载对应的安装包

1、全局安装vue-cli

npm install --global vue-cli

2、在当前路径下创建一个基于webpack模板的项目

vue init webpack my-project

3、安装依赖

cd my-project

npm run dev

1. 命令行执行 : npm install -g vue-cli    // 加-g是安装到全局

2.安装完成以后 可以输入命令 ：vue 回车，可以看到针对vue的命令行；

初始化项目

3.执行命令： vue init webpack demo(你新建的项目名称/文件名称)

4.执行之后将会 自动初始化一个文件夹 ：demo

5.继续执行： cd demo (这是进入到demo文件夹的命令)

6. 然后执行 安装 ：npm install

7.安装完成之后再执行命令： npm run dev 

Vue项目目录结构说明：

build: webpack配置文件

config: 项目开发环境/线上环境的配置文件

node_modules: 项目的依赖环境

src: 项目源代码目录

static:项目的静态资源

index.html: 项目的根实例

src目录下的文件说明：

main.js文件是项目的入口文件

App.vue是一个组件

components: 组件库

用脚手架工具创建项目

1、npm install --global vue-cli          全局安装vue脚手架工具  vue-cli

2、vue init  webpack   my-project   创建一个基于webpack模版的新项目

3、cd my-project   进入到项目目录

4、npm run dev   运行项目

vue-cli 安装