Vue脚手架项目流程

一、Vue脚手架的安装
- 1、node.js安装
- 2、npm
- 3、vue-cli安装
二、初始化一个vue项目
三、项目目录结构
- 1、主要目录
- 2、核心文件
- 3、关系图
四、vue-router
- 1、基本写法及传参的使用
- 2、路由嵌套
五、引入ElementUi
六、引入axios

一、Vue脚手架的安装

1、node.js安装

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

nvm工具的下载和安装：
1、https://www.jianshu.com/p/d0e0935b150a
2、https://www.jianshu.com/p/622ad36ee020

常用nvm命令：

nvm list   # 列出目前在nvm里面安装的所有node版本
nvm install node版本号      # 安装指定版本的node.js
nvm uninstall node版本号    # 卸载指定版本的node.js
nvm use node版本号          # 切换当前使用的node.js版本

Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：

运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上
功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。

我们一般安装LTS(长线支持版本)：

下载地址：https://nodejs.org/en/download/【上面已经安装了nvm，那么这里不用手动安装了】
使用node -v命令可以查看当前node.js版本

2、npm

在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

3、vue-cli安装

我们可以使用npm来安装vue，如果速度过慢，推荐使用阿里镜像：
安装命令：

# 常规安装方法
npm install -g vue-cli
# 阿里镜像安装
npm install -g vue-cli --registry https://registry.npm.taobao.org

二、初始化一个vue项目

我们可以使用以下命令来初始化一个vue项目：

vue init webpack 项目名

接下来根据提示完成项目安装：

安装完成后项目目录如下：

接下来我们可以使用如下命令来将项目跑起来(一定要进入项目目录之中启动)：

npm run dev # 启动项目

如图，启动成功，根据输出信息我们在浏览器中访问vue项目：

至此，一个基本vue项目搭建完成。

三、项目目录结构

1、主要目录

目录	介绍
src	主开发目录，要开发的单文件组件全部在这个目录下的components目录下
static	静态文件资源目录，所有css、js、图片、音频等需要放在这个文件夹
dist	项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]
node_modules	目录是node的包目录
config	配置目录
build	项目打包时依赖的目录
src/router	路由,后面需要我们在使用Router路由的时候,自己声明

2、核心文件

文件	介绍
index.html	vue项目的访问入口文件
main.js	导入App组件，并引入vue核心模块
App.vue	vue项目主组件
router/index.js	主路由文件
components/*	vue项目子组件

3、关系图

四、vue-router

vue-router提供了vue中必要的路由功能，我们可以根据路由来访问不同的组件。

1、基本写法及传参的使用

首先我们创建两个新组件，使用props进行传参：

main.vue:

<template><div class="Main"><h1>page1</h1>{{page1}}</div>
</template><script>
export default {name: 'main',props:["page1"]
}
</script>

page2.vue:

<template><div><h1>page2</h1>{{page2}}</div>
</template><script>export default {name: "page2",props:["page2"]}
</script><style scoped></style>

在router文件夹下的路由主文件index.js中，我们需要定义路由，路径后使用冒号接收请求传参，props设定为true：

import Vue from 'vue'
import Router from 'vue-router'
import page1 from '@/components/Main'
import page2 from '@/components/page2'Vue.use(Router)export default new Router({routes: [{path: '/page1/:page1',name: 'page1',component: page1,props:true},{path: '/page2/:page2',name: 'page2',component: page2,props:true}]
})

App.vue中需使用router-link进行组件的局部跳转，router-view用来将组件内容展示出来:

<template><div id="app"><router-link :to="{name:'page1',params:{page1:1}}">页面1</router-link><router-link :to="{name:'page2',params:{page2:2}}">页面2</router-link><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

首先我们不带任何参数访问，默认访问App.vue主组件：

如图，可通过router-link随意切换。
接下来我们单独访问main.vue及page2.vue，携带参数我们可以自拟，我们以main.vue为例：

显示结果：

2、路由嵌套

在vue中，我们也可以使用路由嵌套来实现子父组件间的嵌套
我们给Main.vue新建两个子组件：
username.vue:

<template><h2>wzy</h2>
</template><script>export default {name: "username"}
</script><style scoped></style>

password.vue:

<template><h2>passsword</h2>
</template><script>export default {name: "password"}
</script><style scoped></style>

在Main对应的路由配置中新增children，配置如下：
index.js:

import Vue from 'vue'
import Router from 'vue-router'
import page1 from '@/components/Main'
import page2 from '@/components/page2'
import transfer from '@/components/Transfer'
import username from '@/components/userinfo/username'
import password from '@/components/userinfo/password'Vue.use(Router)export default new Router({routes: [{path: '/page1/:page1',name: 'page1',component: page1,props:true,children:[{path:'/username',component:username},{path:'/password',component:password},]},{path: '/page2/:page2',name: 'page2',component: page2,props:true},{path: '/transfer',name: 'transfer',component: transfer,},]
})

完成路由配置后，在父组件Main.vue中写入局部跳转及展示：

<template><div class="Main"><h1>page1</h1>{{page1}}<br><router-link to="/username">用户名</router-link><router-link to="/password">密码</router-link><router-view></router-view></div>
</template><script>
export default {name: 'main',props:["page1"]
}
</script>

完成后访问页面查看结果：

如图，路由嵌套成功。

五、引入ElementUi

elementui是一套网站快速成型工具，类似于bootstrap。
官方网站：https://element.eleme.cn/

1、安装：推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

2、引入elementui

main.js中写入以下内容：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);new Vue({el: '#app',router,render: h => h(App)
});

3、按需安装css、sass(推荐7.3.1版本)或less
以安装less为例：
先在package.json中写入less及less-loader对应版本

接下来需要通过npm install命令来安装相关插件

4、使用elementui相关组件
比如我们引入一个可搜索的Transfer穿梭框：

我们新增一个子组件来完成操作：
新建一个Transfer.vue组件，直接复制官方提供的代码：

<template><el-transferfilterable:filter-method="filterMethod"filter-placeholder="请输入城市拼音"v-model="value":data="data"></el-transfer>
</template><script>export default {data() {const generateData = _ => {const data = [];const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];cities.forEach((city, index) => {data.push({label: city,key: index,pinyin: pinyin[index]});});return data;};return {data: generateData(),value: [],filterMethod(query, item) {return item.pinyin.indexOf(query) > -1;}};}};
</script>

index.js中配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import page1 from '@/components/Main'
import page2 from '@/components/page2'
import transfer from '@/components/Transfer'Vue.use(Router)export default new Router({routes: [{path: '/page1/:page1',name: 'page1',component: page1,props:true},{path: '/page2/:page2',name: 'page2',component: page2,props:true},{path: '/transfer',name: 'transfer',component: transfer,},]
})

App.vue中配置跳转路径：

<template><div id="app"><router-link :to="{name:'page1',params:{page1:1}}">页面1</router-link><router-link :to="{name:'page2',params:{page2:2}}">页面2</router-link><router-link to="/transfer">穿梭框</router-link><router-view></router-view></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;/*text-align: center;*/color: #2c3e50;margin-top: 60px;
}
</style>

完成后我们在页面进行访问：

如图，成功引入elementui穿梭框。

六、引入axios

首先使用以下命令安装axios：

方法一：

npm install axios -s

接下来在main.js中引用axios：

import axios from 'axios'
Vue.prototype.axios = axios;

方法二：
安装axios及vue-axios，vue-axios是将axios做成一个vue插件，更适合vue.js生态:

npm install --save axios vue-axios

在main.js中引入axios及vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,axios)

Vue脚手架项目流程相关推荐

vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
vue脚手架项目使用element-ui
1.通过脚手架创建一个项目 2.在vue脚手架项目中安装elementui npm i element-ui -S 使用elementui,在mian.js中全局引入element-ui 2.配置路由 ...
在vue脚手架项目里面使用elementui
1.通过脚手架创建一个项目安装脚手架,点击链接 # 输入 npm run dev # 启动项目 ctrl+c 关闭服务 2.在vue脚手架项目中安装elementui 安装elementui依赖 n ...
使用mac搭建vue脚手架项目
1. 需要安装Node.js C:\Users\wheat> node -v v8.9.3 C:\users\wheat> npm -v 2. 安装vue 脚手架用cnpm(使用国内镜 ...
vue脚手架项目如何加入html文件,使用vue脚手架怎么搭建项目
使用vue脚手架搭建项目的方法:1.全局安装vue-cli脚手架:2.打开命令提示符,通过cd命令进入项目所在文件夹:3.创建vue-cli工程项目:4.安装依赖:5.启动项目. 本教程操作环境:wi ...
Vue脚手架项目结构分析
一.脚手架项目目录结构 ① build 目录内文件介绍文件名描述 build.js 构建生产环境的代码 check-versions.js 检查 Node.js 环境和 NPM 的版本 util ...
vue脚手架项目搭建以及常见命令
1.安装vue2脚手架: (1)在cmd命令行中输入脚手架安装命令: (2)全局安装vue脚手架:npm install -g vue-cli 或者指定版本:npm i vue-cli@5.0.4 - ...
vue创建项目流程与环境搭建
vue项目环境版本: node -vv16.13.0 npm -v8.1.0 vue -V@vue/cli 4.5.15 创建步骤 1. 创建项目 vue create 项目名称第一步 ...
创建一个vue脚手架项目
首先 ,创建脚手架需要安装vue-cli 安装vue-cli就需要npm 所以第一步需要安装Node.js 安装好后,查看版本之后在想要放项目的地方cmd ,安装脚手架 npm install -g ...

Vue脚手架项目流程

Vue脚手架项目流程

一、Vue脚手架的安装

1、node.js安装

2、npm

3、vue-cli安装

二、初始化一个vue项目

三、项目目录结构

1、主要目录

2、核心文件

3、关系图

四、vue-router

1、基本写法及传参的使用

2、路由嵌套

五、引入ElementUi

六、引入axios

Vue脚手架项目流程相关推荐

最新文章

热门文章