Vue项目快速上手（如何新建Vue项目，启动Vue项目，Vue的生命周期，Vue的常用指令）_vue项目创建和启动(1)

2401_84418883

于 2024-04-29 17:47:28 发布

阅读量905

点赞数 13

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84418883/article/details/138320665

版权

程序员专栏收录该内容

199 篇文章 0 订阅

订阅专栏

因为我们是Node.js环境，所以就选包管理器中的 npm

然后根据自己的需求选择预设

这里笔者选择的是手动，选择手动后就可以自定义需要哪些功能不需要哪些功能

点击下一步，配置Vue的版本和语法检测

然后我们耐心等待，项目就创建好了

我们此时去磁盘上查看的话就能看见我们的项目，我们就可以使用VScode打开项目了

三.Vue项目的启动

关于Vue项目的目录结构，我们需要有基础的认知

其中：

node_modules：包含了整个项目的依赖包
public：存放整个项目的静态文件
src：存放整个项目的源代码
package.json：包含模块的基本信息，项目开发所需模块，版本信息
vue.config.js：保存cue配置的文件，如代理和端口的配置等

在 src 中：

assets：存放静态资源
components：存放可重用的组件
router：路由配置
views：视图组件（页面）
App.vue：入口页面（根组件）
main.js：入口js文件

启动Vue项目

关于启动Vue项目，我们也可以通过2种方式运行：

VScode提供的图形化界面
命令行

1.通过VScode提供的图形化界面启动Vue项目

安装下方图示 NPM脚本 ——> serve

然后就按住 ctrl 的同时点击链接就可以了

如果出现找不到NPM脚本或者NPM脚本消失的情况，可以查看：

俩种方法解决 VScode中 NPM 脚本消失

2.通过命令行的方式启动Vue项目

首先我们在项目中打开 cmd 然后输入

npm run serve

同样的按住 ctrl 的同时点击链接就可以了

四.Vue项目的基础使用

常用指令

常用指令：
v-bind ：	为HTML标签绑定属性值，如设置href，css样式等
v-model ：	在表单元素上创建双向数据绑定
v-on ：	为HTML标签绑定事件
v-if ：
v-else-if ：	条件渲染，true渲染，否则不渲染
v-else ：
v-show ：	根据条件展示某元素
v-for ：	列表渲染，遍历容器的元素或者对象的属性

笔者这里只是给出相关指令的使用案例

v-bind 和 v-model

<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url">
    </div>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            url:"https://luming.blog.csdn.net/"
        }
    })
</script>

v-on

    <div id="app">
        <input type="button" value="按钮一" v-on:click="handle()">
        <input type="button" value="按钮二" @click="handle()">
    </div>
<script>
    new Vue({
        el:"#app",
        methods: {
            handle:function(){
                alert("按钮已被点击！");
            }
        }
    })
</script>

v-if

    <div id="app">
        年龄：<input type="text" v-model="age1">
        经判定为：
        <span v-if="age1 <= 35">年轻人(35岁以下)</span>
        <span v-else-if="age1 > 35 && age1 < 60">中年人(35到60岁之间)</span>
        <span v-else>老年人(大于等于60岁)</span>
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            age1:20
        }
    })
</script>

v-show

    <div id="app">
        年龄：<input type="text" v-model="age2">
        经判定为：
        <span v-show="age2 <= 35">年轻人(35岁以下)</span>
        <span v-show="age2 > 35 && age2 < 60">中年人(35到60岁之间)</span>
        <span v-show="age2 >= 60">老年人(大于等于60岁)</span>
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            age2:25
        }
    })
</script>

v-for

    <div id="app">
        <hr>
        <div v-for="addr in address">{{addr}}</div>
        <hr>
        <div v-for="(addr, index) in address">{{index+1}}:{{addr}}</div>
    </div>
<script>
    new Vue({
        el:"#app",
        data:{
            address:["北京","天津","上海","西安"]
        }
    })
</script>