Vue前端环境搭建--Vue项目(一)

一、NodeJS下载

官网地址
选择版本：

然后一键式安装后，检查是否安装成功：

node -v
npm -v

二、安装Vue工具

修改淘宝镜像
(资源在国外，下载比较慢)

npm config set registry https://registry.npm.taobao.org

npm install -g vue-cli // 只需要第一次安装时执行

创建模板异常

通过vue init webpack my-project 创建项目模板时报以下异常：

Command vue init requires a global addon to be installed.
  Please run npm i -g @vue/cli-init and try again.

原因：没有安装init依赖
通过以下语句安装依赖：

npm install -g @vue/cli-init

重新创建项目：

vue init webpack my-project  //使用webpack模板创建一个vue项目

? Project name vue_demo01	//项目名称
? Project description A Vue.js project	//项目描述(默认回车)
? Author ZXXLXX.1597924 <1360844239@qq.com>	//作者
? Vue build (Use arrow keys)	
? Vue build standalone	//相关的构建方式：推荐的是运行+编译(直接回车)
? Install vue-router? Yes	//页面跳转工具(页面路由)
? Use ESLint to lint your code? No	//代码检测工具(规范代码格式，刚开始建议不装)
? Set up unit tests No	//单元测试
? Setup e2e tests with Nightwatch? No	//单元测试
? Should we run `npm install` for you after the project has been created? (recommended) no	//一般选择第一个，第一次运行，选择第三个，不运行此命令

项目模板文件夹：

依赖：

下载依赖：

cd my-project //进入到项目目录中
npm install  //下载依赖（如果在项目创建的最后一步选择了自动执行npm install，则该步骤可以省略）

下载后依赖的文件夹：

启动项目：

npm run dev //启动项目(此处使用WebStorm启动)

启动成功：

三、Vue 项目结构介绍

1、根目录

1. build 文件夹，用来存放项目构建脚本
2. config 中存放项目的一些基本配置信息，最常用的就是端口转发
3. node_modules 这个目录存放的是项目的所有依赖，即 npm install 命令下载下来的文件
4. src 这个目录下存放项目的源码，即开发者写的代码放在这里
5. static 用来存放静态资源
6. index.html 则是项目的首页，入口页，也是整个项目唯一的HTML页面
7. package.json 中定义了项目的所有依赖，包括开发时依赖和发布时依赖
   

2、src目录

1. assets 目录用来存放资产文件
2. components 目录用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。
3. 推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。
4. router 目录中，存放了路由的js文件
5. App.vue 是一个Vue组件，也是项目的第一个Vue组件
6. main.js相当于Java中的main方法，是整个项目的入口js
   

四、启动Vue

使用工具为：WebStorm

1、输入指令

在Treminal中输入 npm run dev 后回车

2、启动

3、访问

4、配置自动启动

进入配置页：

配置：

运行：

自动运行成功

五、工程代码解析

1、工程入口

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

注：能力有限，还请谅解，争取早日能够写出有质量的文章！

我是皮蛋布丁，一位爱吃皮蛋的热爱运动的废铁程序猿。

感谢各位大佬光临寒舍~