安装vue-cli，使用脚手架 vue-cli 构建项目，package.json

安装vue-cli，使用脚手架 vue-cli 构建项目，package.json

什么是 vue-cli

vue-cli

cli: Command Line 命令行工具，vue-cli就是vue的命令行工具，也称之为脚手架，使用vue-cli提供的各种命令可以拉取、创建、运行我们需要使用到的框架，比如webpack、Element UI、Element Admin等等。那么要想使用vue-cli命令，需要先安装node.js。

安装vue-cli前置工作：搭建好NodeJS环境 ------> 安装nodejs

vue-cli是vue.js的脚手架，用于自动生成 vue.js webpack 的项目模板，创建命令如下：

# xxx 为自己创建项目的名称
vue init webpack xxx

安装 vue-cli

# 两种都可，建议 ①
①  npm install @vue/cli -g
②  npm install vue-cli -g

安装完成之后打开命令窗口并输入 vue -V（注意这里是大写的“V”），如果出现相应的版本号，则说明安装成功。

使用脚手架 vue-cli 构建项目

参考官方网址: https://cli.vuejs.org/zh/guide

步骤一

使用脚手架创建项目骨架

此步骤可理解成：使用idea创建一个maven的web项目

vue create spa1
# 此命令用于创建SPA项目，表示在当前目录生成一个以“spa1”命名的文件夹
# spa1即为项目名，项目名不能用中文或大写字母，然后终端会出现“一问一答”模式

步骤二

运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块

此步骤可理解成：maven的web项目创建成功后，修改pom文件添加依赖

cd spa1          #改变路径到spa1文件夹下
npm install      #安装所有项目需要的npm模块

步骤三

启动并访问项目

此步骤可理解成：启动tomcat，并通过浏览器访问项目

npm run dev / npm run serve

注1： 项目启动成功后，打开浏览器输入 http://localhost:8080 即可

package.json

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

npm install的区别

npm install

下载“package.json”中dependencies和devdependencies中配置的
所有依赖模块，并保存到项目的node_modules目录

npm install xxx -g

全局安装，下载依赖模块，
并保存到%node_home%\node_global\node_modules目录下

npm install xxx -S

写入到package.json的dependencies对象，
并保存到项目的node_modules目录

npm install xxx -D

写入到package.json的devDependencies对象，
并保存到项目的node_modules目录

注1： 在git clone项目的时候，项目文件中并没有node_modules文件夹，为什么呢？

• 我们知道这个文件中 (project_home\node_modules) 保存的是我们项目开发中所使用的依赖模块。
• 这个文件夹可能有几百兆大小，如果放到github上，其它人clone的时候会非常慢，这个时候就想到用一个package.json依赖配置文件解决这个问题。
• 这样每个人下载这个项目的时候，只需要进入该项目目录直接 npm install，npm 就会到里面去找需要的函数库，也就是依赖。

注2： 缩写命令的全称，注意大小写、-S,-D都是大写

 i    install
-S    --save
-D    --save-dev 
-g    --global

注3： package.json文件里面的devDependencies和dependencies对象有什么区别呢？

devDependencies里面的插件只用于开发环境，不用于生产环境，而dependencies是需要发布到生产环境的。

例如：gulp ，babel，webpack一般都是辅助工具，应该使用–save-dev安装到开发环境
例如：vue ,react，应该使用–save 安装到生产环境

vue项目结构说明

build 文件夹 此文件夹主要是进行webpack的一些配置

---

config 文件夹

---

node_modules 文件夹
存放npm install时根据package.json配置生成的npm安装包的文件夹

---

src文件夹: 源码目录 (开发中用得最多的文件夹)

---

static文件夹

存放的文件不会经过 webpack 处理，可以直接引用，例如swf文件如果要引用可以在 webpack 配置，对swf后缀名的文件处理的 loader，也可以直接将 swf 文件放在这个文件夹引用。

---

package.json

这个文件有两部分是有用的：
scripts 里面设置命令以及在 dependencies 和 devDependencies 中，
分别对应全局下载和局部下载的依赖包。

---

什么是*.vue文件

① 一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。
② 每个.vue文件包含三种类型的顶级语言块 template, script 和 style。
③ 这三个部分分别代表了 html, js, css。

注1：

不能直接把html代码包裹在< template> < /template> 中，
而是必须在里面放置一个 html 标签来包裹所有的代码。
一般情况是使用 < div> < /div> 标签包含其它的代码。

(保证只有一个根元素)

<template>
	<div>...</div>
</template>

注2：

js代码写在 script 标签中，并通过export导出

    <script>
       export default {
          name: 'App'
       }
    </script> 

注3：

样式与以前的写法一样

这篇好文章是转载于：学新通技术网