vue脚手架(2024年9月份nodejs16

最新推荐文章于 2024-05-06 17:43:10 发布

2401_84434954

最新推荐文章于 2024-05-06 17:43:10 发布

阅读量579

点赞数 14

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84434954/article/details/138236904

版权


![](https://img-blog.csdnimg.cn/14da8341eb134e1e86478a4716143a00.png)


安装完成后可以在对应的文件夹下看到两个内容一个vue一个route。


### **安装vue脚手架**

npm install vue-cli -g


安装提示


![](https://img-blog.csdnimg.cn/10e4471ce9ef45c197fbb1118de7748e.png)


![](https://img-blog.csdnimg.cn/46d18bca52be405fb0373195e5864879.png)


由于没有设置环境变量，暂时vue无法使用。这些命令都在【node\_global】文件夹下。


![](https://img-blog.csdnimg.cn/fca02449b6874af6a42e2d499f7798c5.png)


我们需要再添加一个环境变量。


E:\exe\node-v16.17.0-win-x64\node\_global


![](https://img-blog.csdnimg.cn/d701f2e67cd0480db157f6f43ea041b1.png)


配置完成后查看vue命令是否可以使用。

vue -V


这里的版本还是2.9.6 


![](https://img-blog.csdnimg.cn/257fa887cadf475b820bd0dab7959bd3.png)


### Vue项目创建


**特别备注：项目名称不允许使用数字开头，同时项目命中不允许出现大写字母。**

vue init webpack vue01


我们找个空的位置来放置vue项目


![](https://img-blog.csdnimg.cn/7359ab5ed9e74658a19728d3c5c2ac70.png)


![](https://img-blog.csdnimg.cn/607440e87a664d89a7c73660f9442d0a.png)


连续输入以下命令

cd vue01
npm run dev


稍微等一下就能看到一下提示，可以直接通过提示进行访问。 


![](https://img-blog.csdnimg.cn/317a4c0115c849adb1d11a8aa7bc48c7.png)


访问效果：


![](https://img-blog.csdnimg.cn/7579bbe798a340d3b8c54a7f355609cb.png)


以上整个内容代表vue脚手架安装成功。


![](https://img-blog.csdnimg.cn/3b9e7eed055744aeaf7744503d277a90.png)


这里咱们使用vscode来编辑vue项目


### 项目层级


![](https://img-blog.csdnimg.cn/4ff85a7d50e740c997ba4c4791142f85.png) 


![](https://img-blog.csdnimg.cn/20210208184046788.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Zlbmc4NDAzMDAw,size_16,color_FFFFFF,t_70)


![](https://img-blog.csdnimg.cn/20210208184430570.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Zlbmc4NDAzMDAw,size_16,color_FFFFFF,t_70)


装一个【vetur】插件，显示文本好看。 


![](https://img-blog.csdnimg.cn/0a1ab02316f0475f97b858feb3944f0a.png)


这回打开就能看到格式了：


![](https://img-blog.csdnimg.cn/013d35e1750245599aa0ee844d2cf19c.png)


### demo示例


编码components下的HelloWorld.vue里面的template组件，可以与常规编码处理一样。


![](https://img-blog.csdnimg.cn/996538428d544ecb87c9e6bd1f5d57ce.png)数据双向绑定效果


![](https://img-blog.csdnimg.cn/7cdd492f9d194b7d9783dfdcd1a568e4.png)


### 路由

Home

User

在router文件夹下可以看到有index.js，这是路由的配置文件，我们在components下创建vue的组件，然后注册到index.js中即可。

路由设置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import demo1 from '@/components/demo1'
import demo2 from '@/components/demo2'
import demo3 from '@/components/demo3'
Vue.use(Router)

export default new Router({
    routes: [{
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
        },
        { path: '/demo1', name: 'demo1', component: demo1 },
        { path: '/demo2', name: 'demo2', component: demo2 },
        { path: '/demo3', name: 'demo3', component: demo3 }
    ]
})

咱们的显示主页是App.vue所以我们把我们组件放进去。

<router-link to="/demo1">我是示例1</router-link>

<router-link to="/demo2">我是示例2</router-link>

<router-link to="/demo3">我是示例3</router-link>

访问的主页面

可以通过按钮切换路由

案例测试1

源码

<template>
    <div>
        <h1>组件路径Demo1</h1>
         <table border="1">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>简介</td>
            </tr>
            <tr v-for="(item,key) in list" :key="key">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.introduce}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
     data(){
          return {
                  list:[
         {id:1,name:"秋兰姑娘",introduce:"兰花"},
         {id:2,name:"海棠姑娘",introduce:"海棠花"}
       ]
          }
      }
}
</script>
<style>
    table{
         width:100%;text-align:center;
    }
</style>

demo1示例

axios

import axios from 'axios'

引入后会发现cmd的服务文件报错了，要我们npm install --save axios来安装

npm install --save axios

我们需要先停止服务，先安装axios后再二次启动。【Ctrl+c】可以停止服务。

安装完成后启动vue

启动

npm run dev

在demo2中添加一个axios，我们做一个ajax示例，由于没有数据接口，所以我先做一个静态json文件用作访问。

[
    { "id": 3, "name": "巧荣女士", "introduce": "莫兰迪色小清新。" },
    { "id": 4, "name": "王语嫣", "introduce": "燕子坞学霸~" }
]

demo2示例编码

<template>
    <div>
        <h1>组件路径demo2</h1>
         <table border="1">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>简介</td>
            </tr>
            <tr v-for="(item,key) in list" :key="key">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.introduce}}</td>
            </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            list:""
        }
    },created:function(){
        var _this = this;
        var url = "./static/info.json";
        axios.get(url).then(
                function(res) {
                _this.list = res.data;
            });
    }
}
</script>