vue-cli初探

最新推荐文章于 2023-09-06 11:46:00 发布

原创最新推荐文章于 2023-09-06 11:46:00 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用vue-cli全局安装并创建基于Webpack模板的新Vue.js项目。通过具体步骤演示配置过程，包括项目基本信息设置、依赖安装及运行开发服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先按照官方文档上的步骤创建一个vue的项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project

当运行vue init webpack my-project时，需要填写和选择一些信息，我是这样选择的

? Project name my-project
? Project description A Vue.js project
? Author ****
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

之后进入创建的项目并运行

$ cd my-project
$ npm run dev

此时控制台上会出现

Your application is running here: http://localhost:8080 
访问http://localhost:8080怎会看到
这就代表运行成功了。
生成的目录中，APP.vue为组件的主入口，
<template>
  <div id="app"> 
    <img src="./assets/logo.png">  
    <router-view/>
  </div>
</template>

其中router-view会根据/router/index.js调用不同的component，初始化时

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

Vue.use(Router)

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

当路径为'/'时，<router-view>根据路径渲染成<HelloWorld></HelloWorld>,调用了/components/HelloWorld.vue ,生成了图标下面的文字。