Vue 2 教程菜鸟

快来打我* 2022-10-18 12:52 406阅读 0赞

**目录**

什么是npm。webpack，vue-cli；

安装webpack

安装vue脚手架

安装项目依赖

安装 vue 路由模块vue-router和网络请求模块vue-resource

启动项目

开始 Vue 之旅

一般使用自动提示

VSCode 代码格式化 快捷键

--------------------

[https://www.runoob.com/w3cnote/vue2-start-coding.html][https_www.runoob.com_w3cnote_vue2-start-coding.html]

# 什么是npm。webpack，vue-cli； #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1][]

### 安装webpack ###

cnpm install webpack -g

### 安装vue脚手架 ###

npm install vue-cli -g

![20210708082622760.png][]

进入项目路径中；

# 安装项目依赖 #

一定要从官方仓库安装，npm 服务器在国外所以这一步安装速度会很慢。

npm install

**不要从国内镜像cnpm安装**(会导致后面缺了很多依赖库)

cnpm install

### 安装 vue 路由模块`vue-router`和网络请求模块`vue-resource` ###

cnpm install vue-router vue-resource --save

### 启动项目 ###

npm run dev

遇到：Module build failed: Error: Cannot find module '模块名'

那就安装：

cnpm install 模块名 --save-dev(关于环境的，表现为npm run dev 启动不了)
    cnpm install 模块名 --save(关于项目的，比如main.js，表现为npm run dev 成功之后控制台报错)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2][]

#  开始 Vue 之旅 #

ERROR in ./node\_modules/babel-loader/lib!./node\_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue  
Module not found: Error: Can't resolve './component.first.vue' in 'E:\\front\\cesh\\src'  
 @ ./node\_modules/babel-loader/lib!./node\_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 26:0-45  
 @ ./src/App.vue  
 @ ./src/main.js  
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

### 一般使用自动提示 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3][]

[https://www.runoob.com/w3cnote/vue2-start-coding.html][https_www.runoob.com_w3cnote_vue2-start-coding.html]

<template>
        <div id="first">
            <h1> i am a title</h1>
            <a> writer by {
       {author}} </a>
        </div>
    
    </template>
    
    <script type="text/javascript">
    export default {
        data() {
            return{
                author : "微信公众号 jinkey-love"
            }
        },
    }
    </script>
    <style>
    </style>

--------------------

<firstdem></firstdem>
      
      </div>
    </template>
    
    <script>
    
    import firstdem from "./component/first.vue"
    export default {
    
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      components:{firstdem}
    }

# [VSCode 代码格式化 快捷键][VSCode _] #

Visual Studio Code可以通过以下快捷键 格式化代码：

*  On Windows 　　**Shift + Alt + F**

[https_www.runoob.com_w3cnote_vue2-start-coding.html]: https://www.runoob.com/w3cnote/vue2-start-coding.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70]: /images/20221005/004eeaef5b694c7da0fde24f6f03ab60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 1]: /images/20221005/56da56bb08e94f72a68679e6316ff558.png
[20210708082622760.png]: /images/20221005/9eea773e41e74fb18ab850e17cf76eea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 2]: /images/20221005/d6dc6655a4b64852a370bc62e45bcfed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTk4MjEz_size_16_color_FFFFFF_t_70 3]: /images/20221005/df7c095ff7c04b6ca5956be4ae1f2813.png
[VSCode _]: https://www.cnblogs.com/ryanzheng/p/10950870.html