前端框架vue3的node安装及项目构建的4种方法

前端框架vue3的node安装及项目构建的4种方法

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>cnpm install vue@next

√ Installed 1 packages

√ Linked 21 latest versions

√ Run 0 scripts

√ All packages installed (21 packages installed from npm registry, used 3s(network 3s), speed 1.23MB/s, json 21(455.83KB), tarball 3.07MB, manifests cache hit 0, etag hit 0 / miss 0)

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>vue init webpack runoob-vue3-test

  Command vue init requires a global addon to be installed.

  Please run npm i -g @vue/cli-init and try again.

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>npm i -g @vue/cli-init #此命令执行后，根目录生成了node_modules 文件夹（子目录有很多文件夹和文件）和package.json文件（内容为 {

  "dependencies": {

    "vue": "^3.2.36"

  }

}

）

Vue项目构建方法1：介绍一下使用vue init方法构建vue项目：

C:\Users\Mac\Documents\newlifewyq\技术精英-source\vue\vue3pro>vue init webpack runoob-vue3-test #此命令执行后，npm执行目录生产一个runoob-vue3-test目录，也就是这里是定义了一个新建项目的目录名，在该命令执行中的交互式命令行中会让我们定义项目名，这个才是项目名（即package.json文件中的name属性的值），是我们用当前命令构建的vue项目根文件夹。目录结构参见下图：

 

'git' �����ڲ����ⲿ���Ҳ���ǿ����еij���

�������ļ�

? Project name runoob-vue3-wyq

? Project description new project

? Author wyq

? Vue build standalone

? Install vue-router? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? Set up unit tests Yes

? Pick a test runner jest

? Setup e2e tests with Nightwatch? Yes

? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "runoob-vue3-test".

# Installing project dependencies ...

# ========================

npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated

npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated

npm WARN deprecated [email protected]: this library is no longer supported

npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated

npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.

npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

npm WARN deprecated [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142

npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0

npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

npm WARN deprecated [email protected]: use String.prototype.padStart()<