使用vscode工具进行vue项目开发

Posted ice0man0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用vscode工具进行vue项目开发相关的知识，希望对你有一定的参考价值。

1.vscode下载安装，这里略过....

2.进入vscode，我们打开之前初始化的工程文件夹。例如名字testvue.

3.初始化的工程，我们使用npm run dev启动后，得到的是这样的页面。命令的执行，可以放在cmd里面，当然也可以在vscode中的终端中进行。

  

  

 

4.如果有同学遇到执行命令报错，提示如下图错误。可以参照解决方案处理。如果执行完这个命令还是报错，可能你需要重启以下电脑（ps：我的电脑就重启后可以使用的）

解决方案：

  1. 在Windows应用中找到Windows PowerShell，以管理员运行：

  2. 在命令框输入： set-ExecutionPolicy RemoteSigned， 然后输入A即可解决

   5.vetur插件的安装，使用快捷键是ctrl+shift+x，输入vetur点击安装插件就行。

 6.当前我们只安装步骤5的一个插件。(随着以后学习的深入可以再使用额外的插件)

7.到这里，前期的准备工作我们基本完成，接下来就先需要了解以下vue了。

 首先是目录结构: 

├── build/ # Webpack 配置目录

├── dist/ # build 生成的生产环境下的项目
├── config/ # Vue基本配置文件，可以设置监听端口，打包输出等
├── node_modules/ # 依赖包，通常执行npm i会生成
├── src/ # 源码目录（开发的项目文件都在此文件中写）
│ ├── assets/ # 放置需要经由 Webpack 处理的静态文件，通常为样式类文件，如css，sass以及一些外部的js
│ ├── components/ # 公共组件
│ ├── filters/ # 过滤器
│ ├── store/ 　　　　 # 状态管理
│ ├── routes/ # 路由，此处配置项目路由
│ ├── services/ # 服务（统一管理 XHR 请求）
│ ├── utils/ # 工具类
│ ├── views/ # 路由页面组件
│ ├── App.vue # 根组件
│ ├── main.js # 入口文件
├── index.html # 主页，打开网页后最先访问的页面
├── static/ # 放置无需经由 Webpack 处理的静态文件，通常放置图片类资源
├── .babelrc # Babel 转码配置
├── .editorconfig # 代码格式
├── .eslintignore # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc # ESLint 配置
├── .gitignore # （配置）在上传中需被 Git 忽略的文件（夹）
├── package.json # 本项目的配置信息，启动方式
├── package-lock.json # 记录当前状态下实际安装的各个npm package的具体来源和版本号
├── README.md # 项目说明（很重要，便于其他人看懂）

其次就是我们要弄清楚下图中标识的四个文件的区别。

index.html---主页，项目入口

App.vue---根组件

main.js---入口文件 ：引入vue框架，根组件及路由设置，并且定义vue实例

index.js---路由配置

  

  8.通过进行一些修改展示来理解vue

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test-vue</title>        //这里可以进行浏览器title的修改
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
App.vue,当前先不做修改
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: \'App\'
}
</script>

<style>
#app {
  font-family: \'Avenir\', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
修改conponet文件夹下HelloWorld.vue为Home.vue,并做如下部分修改
<template>
  <div class="home">
    <h1>缘来是你</h1>
    <h2 class="weather">今天的天气：{{msg}}</h2>
  </div>
</template>

<script>
export default {
  name: \'home\',
  data () {
    return {
      msg: \'做一个开心的飞猪！\'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
router下的index.js路由做如下修改
import Vue from \'vue\'
import Router from \'vue-router\'
import Home from \'@/components/Home\'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: \'/\',
      name: \'home\',
      component: Home
    }
  ]
})
以上修改保存后，再看我们的页面http://localhost:8080/#/，就变成了这样:

 

 

风 请记住我最灿烂的笑魇 …… 风 请留住你最深情的视线 …… 风 请双手合十与我共祈愿 ……

以上是关于使用vscode工具进行vue项目开发的主要内容，如果未能解决你的问题，请参考以下文章

VsCode工具开发vue项目必装插件

Vue.之.项目开发工具选用

vue选idea还是vscode

VSCode调试vue项目

创建vue3项目所需要的插件

使用VSCode配置简单的vue项目