vue-cil搭建项目

1.vue-cli搭建项目

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义 好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个 骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速

主要的功能

•  统一的目录结构 
• 本地调试 
• 热部署 
• 单元测试 
• 集成打包上线
• 需要的环境 

Node.js

简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释。

npm

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。npm 是 JavaScript 的包管理工具，也是世界上最大的软件注册表。有超过 60 万个 JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用 其他开发人员共享的代码。

2.如何创建vue-cil项目

选中vue项目

检验是否创建成功

1. 点击命令行窗口
2. 输入 npm run serve
3. 随意点击一个网页地址
4. 在命令行中 ctrl+c 停止服务

点击第一个网址,选用外部浏览器

项目结构解读

 ​•  npm install

下载并安装项目依赖，即node_modules 。由于我们项目的大小90%都是项目依赖所占用，所以通常在给别人发送我们的代码时不用发送node_modules文件夹，对方在接收后通过在终端输入npm install命令进行手动下载项目依赖。

在下载之前需要先删除 package-lock.json 文件 

如果package-lock.json 文件删除后仍然出现，可以在终端输入命令：
npm config set package-lock false

 ​•  npm run build

用来打包项目，生成一个dist文件夹 ，类似于maven的打包功能

3.组件路由

创建前需要删除

components文件夹和App.vue以及 package-lock.json文件

安装

vue-router 是一个插件包，所以我们还是需要用 npm 来进行安装的。 打开命令行工具，进入你的项目目录，输入下面命令。

npm i vue-router@3.5.3

下载成功后在项目的package.json文件中会添加 "vue-router" : "^3.5.3" ，表明下载安装成功。

 在src目录下创建一个router包，并创建一个index.js文件

 在index.js中配置路由

我这里创建了三个vue组件，分别是Index.vue、Login.vue、Reg.vue。要实现组件路由需要先在index.js中导入这三个组件，并为其定义一个访问地址，其通常由path和component两个部分组成，path用来定义component所绑定的组件地址。component后的组件名必须和import后的名字对应相同

import Vue from 'vue';/* 导入vue */
import router from 'vue-router'; /* 导入路由 */
 
 /* 导入注册组件*/
import Index from '../Index.vue';
import Login from '../Login.vue';
import Reg from '../Reg.vue';


 Vue.use(router)
 
  /* 定义组件路由    定义组件访问地址 */
  var rout = new router({
  routes: [
	{
	path: '/',//默认访问
	component: Index
	},
  {
  path: '/index',
  component: Index
  },
  {
  path: '/login',
  component: Login
  },
  {
  path: '/reg',
  component: Reg
  }
  ]
  });
  
  //导出路由对象
 export default rout;

这里我们默认首次启动项目访问的是Index.vue组件，所以在Index.vue组件中使用<router-link>组件来创建Reg.vue和Login.vue组件的导航链接

 在main.js中配置路由

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import router from './router/index.js'
 Vue.use(router);

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

配置完成后的main.js完整代码如图：

最后通过<router-view>组件来展示对应的组件内容