Vue脚手架项目构建

Vue脚手架项目构建

一 安装Vue CLI

Vue CLI是Vue框架的客户端工具，创建Vue项目、运行Vue项目都需要事先安装此工具。

安装Vue CLI的cmd命令:

npm install -g @vue/cli

以上命令执行完后，只要没有提示错误（Err或Error字样），即可视为成功!

当Vue CLI安装完成后，可以通过以下命令查看版本号并检查是否安装成功：

如果有的err话,关闭这个命令,在重新构建继续输入上面的命令,知道成功为止.

 vue -V

二 创建项目

在命令提示符窗口中，执行vue create 项目名称的命令，就可以创建项目，创建出来的项目会在命令提示符窗口中提示的位置（即：敲命令时左侧提示的位置）

创建:

vue create xxxxx 

注意:执行以上命令后，会有一点卡顿，此时不要反复按回车，接下来，需要选择创建选项，分别是：

Manually select features
Babel / Vuex / Router   //(用空格尽行选择)
2.x
直接回车
In package.json
直接回车

当创建完成后，可以使用IntelliJ IDEA打开此项目，并且，在IntelliJ IDEA的Terminal（终端）面板中，可以执行启动项目的命令：

npm run serve

三 关于Vue脚手架项目

Vue脚手架项目是一个单页面的应用，即整个项目中只有1个html页面，它认为这个页面是由若干个视图组合而成的，每个视图都只是该页面中的一个部分，并且，都是可以被替换的！

项目的文件夹结构：

• [.idea]：仅当使用IntelliJ IDEA打开此项目后，才会有这个文件夹，是IntelliJ IDEA管理项目时使用的，无需关注此文件
• [node_modules]：此项目中使用的各个库的文件，注意：通常，提交到GIT的项目代码中并不包含此文件夹，需要先执行npm install命令，则会自动下载此项目中的各个库的文件，然后才可以运行项目
• [public]：此项目的静态资源文件夹，通常用于存放图片、自行编写的js、自行编写的css等文件，此文件夹下的资源的访问路径都是根路径
• public/favicon.ico：此项目的图标文件，此文件必须在这个位置，且必须是这个文件名
• public/index.html：此项目中唯一的html文件，也是项目打开页面的入口
• [src]：源文件的文件夹
• [src/assets]：资源文件夹，此处的资源文件应该是不随程序运行而发生变化的
• [src/components]：视图组件文件夹，此文件夹下的视图组件通常是被视为封装的视图，且将会被其它视图调用
• [src/router]：此项目中配置路径的文件所在的文件夹
• src/router/index.js：默认的路由配置文件
• [src/stroe]：此项目的配置全局共享变量的文件所在的文件夹
• src/store/index.js：默认的配置全局共享变量的文件，此处声明的变量，在任何一个视图组件中均可使用
• [views]：一般的视图组件所在的文件夹
• src/App.vue：默认绑定到index.html中的
  的视图组件，可简单理解为页面的入口，此视图组件不需要配置路由，默认就会显示
• src/main.js：此项目的主配置文件，通常，在项目中安装了软件之后，都需要在此文件中补充配置
• .gitignore：使用GIT时的忽略文件清单，即：用于配置哪些文件不会提交到Git
• package.json：项目的配置文件，例如配置了此项目的依赖项等
• package-lock.json：锁定的配置文件，不需要，也不建议手动修改此文件中的任何内容

四 关于视图组件

在Vue脚手架项目中，以.vue为作文件名后缀的，就是视图组件！

在视图组件中，源代码主要有3个部分：