js写vue怎么运行

使用JavaScript编写Vue.js项目的运行步骤：安装Vue CLI、创建项目、运行开发服务器。 Vue.js 是一个用于构建用户界面的渐进式框架，最常用的方法是使用 Vue CLI 创建和管理项目。这些步骤包括安装 Vue CLI、创建新项目、运行开发服务器以及编写和管理 Vue 组件。接下来，我将详细介绍每一步。

一、安装 Vue CLI

Vue CLI 是一个标准工具，用于快速搭建 Vue.js 项目。它不仅可以帮助你创建项目，还能提供一整套的插件和工具来提升开发体验。

1.1、安装 Node.js 和 npm

在安装 Vue CLI 之前，你需要确保已经安装了 Node.js 和 npm。Node.js 是一个 JavaScript 运行环境，而 npm 是 Node.js 的包管理工具。你可以从 Node.js 官网下载并安装最新版本的 Node.js 和 npm。

安装完成后，可以通过以下命令检查是否成功安装：

node -v npm -v

1.2、安装 Vue CLI

在终端或命令行中，使用以下命令全局安装 Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查 Vue CLI 是否安装成功：

vue --version

二、创建 Vue 项目

安装好 Vue CLI 后，你可以使用它来创建一个新的 Vue 项目。

2.1、创建新项目

在终端中，导航到你希望创建项目的目录，然后运行以下命令：

vue create my-vue-app

你将会看到一个交互式的提示，询问你是否使用默认设置还是进行自定义配置。对于初学者，选择“默认”配置即可。

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)

选择默认配置后，Vue CLI 会自动创建项目结构并安装所需的依赖包。

2.2、导航到项目目录

创建完成后，导航到新创建的项目目录：

cd my-vue-app

三、运行开发服务器

Vue CLI 为你提供了一个开发服务器，可以实时编译和热重载你的代码。

3.1、启动开发服务器

在项目目录中，运行以下命令启动开发服务器：

npm run serve

你将会看到类似以下的输出：

App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.2:8080/

打开浏览器并访问 http://localhost:8080/，你将看到一个默认的 Vue 欢迎页面，这表示你的 Vue 项目已经成功运行。

四、编写和管理 Vue 组件

在 Vue 项目中，组件是构建用户界面的基本单元。每个组件通常包含模板、脚本和样式。

4.1、理解组件结构

Vue 组件通常由三个部分组成：模板（template）、脚本（script）和样式（style）。这些部分通常在一个单文件组件（SFC）中定义，文件扩展名为 .vue。

例如，一个简单的 Vue 组件可能如下所示：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>
<style scoped>
.hello {
  color: red;
}
</style>

4.2、创建新组件

在 src/components 目录下创建一个新的 .vue 文件，例如 MyComponent.vue：

<template>
  <div>
    <h1>This is My Component</h1>
  </div>
</template>
<script>
export default {
  name: 'MyComponent'
}
</script>
<style scoped>
h1 {
  color: blue;
}
</style>

4.3、使用组件

在 src/App.vue 文件中引入并使用你新创建的组件：

<template>
  <div id="app">
    <MyComponent />
  </div>
</template>
<script>
import MyComponent from './components/MyComponent.vue'
export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>
<style>
/* Global styles */
</style>

保存文件后，开发服务器将自动重新加载页面，你将看到你的新组件已经成功渲染。

五、使用 Vue Router 和 Vuex

Vue 项目中常用的两个库是 Vue Router 和 Vuex。Vue Router 用于处理单页面应用（SPA）的路由，而 Vuex 是一个状态管理库。

5.1、安装 Vue Router

在终端中，运行以下命令安装 Vue Router：

npm install vue-router

5.2、配置 Vue Router

在 src 目录下创建一个 router 目录，并在其中创建一个 index.js 文件：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home.vue'
import About from '../components/About.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

在 src/main.js 文件中引入并使用 Vue Router：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5.3、创建路由组件

在 src/components 目录下创建 Home.vue 和 About.vue 组件：

<!-- Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>
<script>
export default {
  name: 'Home'
}
</script>
<style scoped>
/* Styles */
</style>

<!-- About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>
<script>
export default {
  name: 'About'
}
</script>
<style scoped>
/* Styles */
</style>

5.4、使用 Vue Router 链接

在 src/App.vue 文件中添加导航链接：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>
<style>
/* Global styles */
</style>

六、使用 Vuex 进行状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

6.1、安装 Vuex

在终端中，运行以下命令安装 Vuex：

npm install vuex

6.2、配置 Vuex

在 src 目录下创建一个 store 目录，并在其中创建一个 index.js 文件：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    count: state => state.count
  }
})

在 src/main.js 文件中引入并使用 Vuex：

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

6.3、使用 Vuex

在组件中使用 Vuex 提供的状态和方法。例如，在 src/components/MyComponent.vue 中：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'MyComponent',
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>
<style scoped>
/* Styles */
</style>

七、使用第三方库和插件

Vue.js 生态系统非常丰富，有许多第三方库和插件可以集成到你的项目中，以增加功能和提高开发效率。

7.1、安装第三方库

你可以使用 npm 或 yarn 安装第三方库。例如，安装 Axios（一个用于执行 HTTP 请求的库）：

npm install axios

7.2、使用第三方库

在组件中引入并使用第三方库。例如，在 src/components/MyComponent.vue 中：

<template>
  <div>
    <h1>{{ data }}</h1>
    <button @click="fetchData">Fetch Data</button>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'MyComponent',
  data() {
    return {
      data: null
    }
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data')
        this.data = response.data
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>
<style scoped>
/* Styles */
</style>

八、部署 Vue 项目

当你完成了开发工作后，可以将你的 Vue 项目部署到生产环境。

8.1、构建项目

在终端中，运行以下命令构建项目：

npm run build

构建完成后，你将会在项目根目录下看到一个 dist 目录，里面包含了所有静态文件。

8.2、部署到静态服务器

你可以将 dist 目录中的文件上传到任何静态文件服务器，如 GitHub Pages、Netlify、Vercel 或你的自有服务器。

例如，如果你使用 Netlify 进行部署，可以参考 Netlify 的官方文档获取详细的部署步骤。

九、总结

通过以上步骤，你已经了解了如何使用 JavaScript 编写 Vue.js 项目并运行它。安装 Vue CLI、创建项目、运行开发服务器、编写和管理组件、使用 Vue Router 和 Vuex、集成第三方库、部署项目这些步骤涵盖了从开发到部署的整个流程。希望这篇文章对你有所帮助，祝你在使用 Vue.js 开发过程中取得成功！