win10 Vue 应用的创建和运行（使用脚手架，超详细）

1.Vue 应用的创建（使用脚手架）

vue-cli工具使我们能够创建随时可用的应用框架，以帮助我们开始一个新项目。它与一个项目模板系统一起工作，会向你提出一些问题然后根据需求定制框架。

注意：关于旧版本
Vue CLI 的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。

使用以下命令列出官方项目模板：

vue list

以下是终端中显示的列表：

官方模板有以下3种主要类型：

1. simple：不使用构建工具
2. webpack：使用非常流行的 Webpack 打包器（推荐）
3. browserify：使用 Browserify 构建工具

想使用其中一个模板创建新的应用项目，要使用 vue init 命令：

vue init <template> <dir>

有两种方式可以创建项目：

1.1 方法一（自动创建文件夹）

例如：

• 先在D盘新建一个关于vue项目的总的文件夹（空文件夹），用来存放所有的vue项目的代码，路径是F:\code\VueCode。

• 在空文件夹F:\code\VueCode下打开cmd，输入如下命令：

  vue init webpack demo
  

  需要注意的是项目的名称不能大写，不然会报错

  刚开始显示的画面如下：
  

  下载过后，会要求依次输入项目的基本信息，如下图所示：
  

​ 基本信息主要包括：

• 项目名称；
• 项目描述；
• 项目作者；
• Vue项目构建：运行+编译还是仅运行；
• 是否安装vue-router；
• 是否使用ESLint；
• 是否使用单元测试；
• 是否适用Nightwatch e2e测试；
• 是否在项目创建成功后自动执行“npm install”安装依赖，若选择否，则在第4行命令执行之前执行“npm install”

​ 如果不想填直接回车默认就好（遇到无法敲字符的地方就多按几下回车键），最后弹出：

​ 接下来你会发现该文件夹下多了个名叫demo的文件夹，打开之后，其结构为：

这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装。该文件夹的结构我们在最后一大节进行讨论，目前，你只需要知道package.json文件非常重要，包含这个项目的主要信息。

1.2 方法二（先手动新建文件夹）

• 先新建一个空文件夹：F:\code\VueCode。

• 再新建一个空文件夹（放置工程）：F:\code\VueCode\demo。

• cmd到这个空文件夹，输入如下命令：

  vue init webpack
  

• 过程同上。

2.运行项目（简单的项目运行）

2.1 安装项目所需的依赖的方法

项目的文件夹生成之后，进入该文件夹（F:\code\VueCode\demo），打开cmd，输入以下命令，进行安装：

npm install

会出现如下信息：

有警告，我百度了，不用理会。

现在已经设置好了。

任何Vue应用都需要一个 JavaScript入口文件，这是代码开始的地方。

1. 移除src文件夹中的内容。
2. 使用以下内容创建一个新的JavaScript文件，名为main.js：
   

在此文件中，我们首先将Vue核心库导入文件中。然后创建了一个新的Vue根实例，该实例将附加到页面中id为app的元素。最后，我们显示了一个包含文本hello world的div元素。

最后，终于可以运行项目了。

2.2 运行项目

运行由vue-cli生成的npm脚本dev，以开发模式启动应用：

npm run dev

这将在一个Web服务端口上启动Web应用。终端应当显示编译成功，以及使用什么URL访问该应用：

在谷歌浏览器中输入http://localhost:8080，会出现：

3.Webpack下的Vue.js项目文件结构

当我们使用 vue init 命令时：

vue init <template> <dir>

经过几个步骤会生成项目文件，该文件夹的结构如图所示：

其中：

1. build/ //编译用到的脚本
2. config/ //各种配置
3. dist/ //打包后的文件夹
4. node_modules/ //node第三方包
5. src/ //源代码
6. static/ //静态文件，暂时无用
7. index.html //最外层文件
8. package.json //node 项目配置文件

下面依次说明各个文件夹做个说明：

1.build文件夹

build文件夹中保留了各种打包脚本，是不可或缺的，不可随意修改。

• buildjs：打包使用，不能修改。
• check-versions.js：检查npm的版本，不能修改
• utilsjs：不能修改，做一些css/sass等文件的生成。
• vue-loader.conf.js：非常重要的配置文件，不能修改。内容是用于辅助加载Vue.js用到的css source map等。
• Webpack.base.conf.js、Webpack.dev.conf.js、Webpack.prod.conf.js：这三个都是基本的配置文件，不能修改。

2.config文件夹

与部署和配置相关。

3.node_modules文件夹

安放第三方库的地方。

4.src文件夹

4.说明

通过 Webpack 创建的 SPA 项目，查看其源代码， 内一般只有一个

元素作为根实例挂载节点，其他都由 JavaScript 来渲染。