vue项目创建

图形化界面进行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