前端项目搭建基本流程

前端项目搭建的流程:

1.安装node.js

2.在hbuilderX中创建一个vue-cli项目(脚手架)

3.组件路由

• vue router是Vue.is官方的路由管理器.它和Vue.is的核心深度集成,让构建单页面应用变得易如反掌.

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

4.搭建步骤

• 在main.js中引入router

//配置路由
import router from './router/index.js'
Vue.use(router);
new Vue({
el: '#app',
router,
render: h => h(App)
})

• 在项目中创建一个router目录,并创建index.js文件,编写路由逻辑.

• 编辑router下的index.js文件

创建 index.js 文件,在其中配置路由
import Vue from 'vue';
import router from 'vue-router';
/* 导入路由 */
import login from '../views/login';
/* 导入其他组件 */
import content from '../components/content';
/* 导入其他组件 */
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/index',
name: 'index',
component: index
},
{
path: '/content',
component: content
}
]
});
//导出路由对象
export default rout;

4.在项目中创建目录并编写

5.在router页面对组件进行页面引入

6.安装element-ui(在项目路径里安装)

npm i element-ui -S