webstorm新建vue项目

以前学过vue,但是长时间没用，荒废了，最新有空就复习一下相关的项目搭建过程。然后新建一个可以跳转页面，熟悉一下相关知识。说起来很简单，但是按照有些网上教程却走不通，特此记录一下。
开始用的vs code，但是使用中发现无法新开一个窗口（可能是我配置的问题，也没有深入研究），比如无法打开历史项目做参考，而且语法提示，引用链接啥的也不友好，于是又回到webstorm中，小白还是用jetbrains的轮椅ide吧（笑哭）。
环境准备工作就不赘述了，不会可以去网上搜一下，包括：
1：webstorm的安装
2：node.js的安装
3：vue-cli

1.打开webstorm,然后找到新建->项目

image.png

2.选择新建vue项目，然后选择对应vue客户端，选择自己安装的，不要选择默认的，默认会使用vite打包而不是webpack,后续会有一些比较奇怪的问题（可能是自己太小白）

dcc1e2615b0a09a7a97725068d3c7aea.png

然后点击创建，就会自动生成项目文件

3.然后使用打开窗口->终端，进入终端，输入npm run serve命令，启动项目

image.png

看项目是否能正常启动和访问

4.修改项目中文件内容，加入自己想要的页面跳转功能（特别是App.vue中的内容一定要替换，不然页面跳转将不可用,注释掉的自动生成的代码）

1. App.vue:

<template>
<!--  <img alt="Vue logo" src="./assets/logo.png">-->
<!--  <HelloWorld msg="Welcome to Your Vue.js App"/>-->
  <nav>
    <router-link to="/about">About</router-link> |
  </nav>
  <router-view/>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
//
// export default {
//   name: 'App',
//   components: {
//     HelloWorld
//   }
// }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

2. AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

3）index.js

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
    {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: function () {
            return import(/* webpackChunkName: "about" */ '../components/AboutView.vue')
        }
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

export default router

4. main.js

import { createApp } from 'vue'
import router from './router'
import App from './App.vue'

createApp(App).use(router).mount('#app')

github地址：https://github.com/y951220519-pixel/vue_first.git

后记：之前使用vue init webpack vue_first命令生成项目之后，启动报错:Error: No such module: http_parser;无法解决,所以只能老老实实使用ide去创建项目