手工创建一个Vue项目

首先确保你得有个node.js环境，命令行   node -v  ，没有安装需要  下载   

介绍一下自动创建一个空工程。

npm install vue -g

在你想要保存项目的位置打开命令行，输入vue  create 

接着进入选项，一步步选择需要的东西，最后等待，搭建成功。

准备就绪开始搞。

1、手动创建一个文件夹，在你想要的位置，这个文件夹就作为后续的项目总文件夹。

2、进入该文件夹，在文件夹里 shift+鼠标右键，打开命令行窗口

3、输入 npm init，会提醒输入一些配置文件的名称，描述等不重要的信息，直接重复回车，直到结束。

4、此时在你的文件夹中会出现一个package.json文件，记事本打开，将其清空，将如下内容复制进去，开头几行的name、verson可以自己定义，其他的不要改，保存关闭。

{
  "name": "firstvue",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "description": "## Project setup ``` yarn install ```",
  "main": "babel.config.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

5、切换到命令行，执行 npm  install  ，该命令会根据package.json文件的信息进行下载相关依赖文件，等待结束。

6、文件夹此时会多出一个node_modules文件夹，里面是Vue运行所需资源，不要对它有任何操作。创建一个src文件夹作为我们代码开发的根目录。

7、vue官方提供的标准，将main.js作为Vue项目启动的入口文件，可以修改，通过工具搜索项目文件夹关于main.js的字符串，找到修改即可，有需要再改。

8、因此我们这里需要创建一个main.js文件，和一个主页文件index.vue

index.vue代码如下：

<template>
  <div id="app">
    <h2>Vue项目</h2>
    <h2>foo={{foo}}</h2>
    <h2>boo={{boo}}</h2>
    <h2>coo={{coo}}</h2>
    <h2>doo={{doo}}</h2>
  </div>
</template>
<script>
export default {
  data(){
    return{
      foo:'javascript',
      boo:'html',
      coo:'css',
      doo:'vue'
    }
  }

}
</script>

<style scoped>

</style>

main.js代码：

import Vue from 'vue'
import index from './index.vue'

Vue.config.productionTip = false

new Vue({
    render: h => h(index),
}).$mount('#app')

main.js中的#app对应index.vue的div的id。

执行命令   yarn  serve    

访问http://localhost:8080/

创建成功。

如果不想用8080，创建vue.config.js文件在项目的根目录，不是src，代码如下：

module.exports = {
  devServer: {
    port: 80
  },
};

保存关闭，再次执行命令    yarn serve   

发现端口以及改为80