vue2项目创建

主要工具：node + webpack + VScode + 谷歌浏览器 + git

主要学习:  数组的方法 + promise + await + async + 模块化........

首先下载安装 node 和 npm

# 安装脚手架@vue/cli

我用的cli@4   3|4差不多

安装@vue/cli （Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）  

npm install -g @vue/cli@4

 

# 创建vue项目

3|4：vue create 项目名称

或通过视图创建项目：vue ui

1)编码测试

    cd XXX

    npm run serve

    访问: http://localhost:8080

    编码, 自动编译打包(HMR), 查看效果

2)打包发布

    npm run build

    npm install -g serve

    serve dist -p 5000

    访问: http://localhost:5000

 

# 脚手架下载下来的项目稍微配置一下

浏览器自动打开

        在 package.json 文件中

        "scripts": {

         "serve": "vue-cli-service serve --open",

          "build": "vue-cli-service build",

          "lint": "vue-cli-service lint"

        },

# 关闭eslint校验工具

创建 vue.config.js 文件：需要对外暴露

module.exports = {

   lintOnSave:false,

}

3.3 src文件夹的别名的设置

因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些

创建jsconfig.json文件

{

    "compilerOptions": {

        "baseUrl": "./",

        "paths": {

            "@/*": [

                "src/*"

            ]

        }

    },

    "exclude": [

        "node_modules",

        "dist"

    ]

}

# 脚手架目录

vue-cli3/cli4中移除了配置文件目录：config 和 build 文件夹。

同时移除了 static 静态文件夹，新增了 public 文件夹，将 index.html 移动到 public 中。

public + assets文件夹区别

node_modules:放置项目依赖的地方

public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面

src：程序员源代码文件夹

  -----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面）

  -----components文件夹:一般放置非路由组件（或者项目共用的组件）

        App.vue 唯一的根组件

        main.js 入口文件【程序最先执行的文件】

        babel.config.js:babel配置文件

        package.json：看到项目描述、项目依赖、项目运行指令

        README.md:项目说明文件