使用图形化界面进行vue项目创建
1、安装nodejs
2、下载vue脚手架
npm install vue-cli -g // 3.0以前的版本
npm install @vue/cli -g // 3.0以后的版本
3、安装后使用管理员运行cmd,运行命令vue ui
进行初始化项目,并将自动跳转到创建项目的浏览器页面
4、点击最下方创建新项目,输入项目名称,并关闭git
5、下一步选择手动,在下一步选择router、vuex
6、下一步,默认选择,版本选2.x,之后创建项目,不保存预设
7、如果需要使用element-ui框架,则选择插件,搜索element-ui,选择如下,点击安装,之后默认配置,点击完成安装
8、点击左侧任务,选择serve,点击运行,选择右侧输出,点击下方的本地ip地址,出现红框中的文字才算安装完成
9、在Vue项目中新建页面进行测试
- 在views目录下新建Display.vue文件,编写如下代码
<template>
<div class="Display">
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>密码</td>
</tr>
<tr v-for="item in users">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.password}}</td>
</tr>
</table>
{{msg}}
</div>
</template>
<script>
export default{
name: "Display",
data(){
return{
msg: 'hello',
users:[
{
id:1,
name: 'tom',
password: '123',
},
{
id:2,
name: 'tom2',
password: '1232',
},
{
id:3,
name: 'tom3',
password: '1233',
},
]
}
}
}
</script>
-
在router目录下的index.js中编写代码
- 顶部引入文件
import Display from '../views/Display.vue'
- const routes中加入路由选项
{ path: '/display', // URL访问路径 name: 'Display', // 名称 component: Display // 对应顶部引入资源 },
- 顶部引入文件
-
终端使用命令
npm run serve
启动应用 -
浏览器访问 http://localhost:8080/display 效果展示如下图
Windows命令行创建vue项目
使用管理员运行cmd,切换到创建项目的目录下,运行以下命令创建新的vue项目
1、创建项目
vue create yeb
出现上图表示成功,如果出现无法加载文件的错误,运行命令set-ExecutionPolicy RemoteSigned
后选择y
,之后再创建项目
2、选择配置
选择上图中的第三个选项,手动进行项目配置,选择带*
的选择,这里使用空格进行选择。
之后的完整配置选项如下图所示,分别表示
使用历史router模型
选择配置文件存放
是否保存为模板
3、项目创建成功
4、运行项目
使用上图的命令运行项目,成功启动项目如下图
cd yeb
npm run servr