vue-cli 3.x 版本与2.x版本在搭建项目时的区别

vue3.x版本

先使用命令行更新vue-cli-3.x

npm install -g @vue/cli

 或

yarn global add @vue/cli

安装之后,你就可以在命令行中访问 vue 命令。你可以通过简单运行 vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。

你还可以用这个命令来检查其版本是否正确 (3.x):

vue --version

 运行以下命令来创建一个新项目:

vue create hello-world

 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。

vue-cli 3.x 版本与2.x版本在搭建项目时的区别_第1张图片

完了之后用视图创建项目  命令行:vue  ui 

vue-cli 3.x 版本与2.x版本在搭建项目时的区别_第2张图片

然后点击创建跟着步骤走就好;具体参考https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

vue2.x版本

用vue3.x创建

vue init webpack mypro

npm install -g @vue/cli-init

vue init webpack mypro 

cd pro

npm install

在npm install过程中,npm ERR! UnexpectedendofJSONinputwhileparsing near

解决方法

    npm install --registry=https://registry.npm.taobao.org --loglevel=silly

    npm cache clean --force

完美解决,再次npm install

npm run dev

vue-cli 3.x 版本与2.x版本在搭建项目时的区别_第3张图片

区别

用vue-cli3.0版本创建的项目与2.0版本相比较,我们会发现,文件目录少了很多 eg:build、config,那么如何像vue-cli 2.* 之前关于端口号的配置、打包之后的路径的配置、图片的配置等,到哪里配置呢??vue-cli 3.0 可以在项目的根目录下新建一个 vue.config.js 文件,之前繁琐的配置都可以在这里直接配置。

官方是这样说的。vue.config.js 是一个可选的配置文件,如果项目的(和package.json 平级)根目录中存在这样一个文件,那么他会被 @vue/cli-service 自动加载,(并覆盖其内部的配置)

更多的相关配置,可参考官网https://cli.vuejs.org/zh/config/#vue-config-js

参考博客https://blog.csdn.net/zhumany_csdn/article/details/82910656

 

 

你可能感兴趣的:(Vue)