如何使用webpack初始化一个vue项目

ppylox
·3/14/2020·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

本文介绍使用webpack初始化Vue项目的流程:安装Node,将npm设为淘宝源,全局安装vue与vue-cli,执行vue init webpack my-project创建项目,进入目录npm i安装依赖,npm run dev运行、npm run build打包。若公司无法访问GitHub,可下载vuejs-templates/webpack到本地,用vue init ./webpack my-project初始化。兼容IE需安装babel-polyfill并设置X-UA-Compatible meta标签。完成后可添加axios、element-ui、less、vuex等插件。

\n

如果是刚入门的小伙伴们想学习一下vue,要怎么上手创建一个vue项目呢,下面介绍一下初始化一个vue项目的大概的流程,想要学习更多的可以去vue官网看看。

\n\n\n

1、先安装node

\n\n\n

2、npm 设置成淘宝源:

\n\n\n

npm config set registry https://registry.npm.taobao.org

\n\n\n

3、安装vue以及vue-cli:

\n\n\n

npm i vue vue-cli -g

4、创建一个基于 webpack 模板的新项目

\n\n\n

vue init webpack my-project

\n\n\n

5、安装依赖,进入项目根目录执行一下命令安装依赖

npm i

\n\n\n

6、运行项目

npm run dev

\n\n\n

7、打包项目

npm run build

\n\n\n

注意:

1、vue init webpack my-project 执行这行命令的时候如果在一些安全性要求较高的公司,不能访问github的情况下,可能会出现一直在下载那个地方,这种情况下可以使用要本地安装的办法去(https://github.com/vuejs-templates/webpack)下载文件放在项目根目录下,再使用 vue init ./webpack my-project 就直接初始化项目了,不用再去github下载了再执行npm run dev 就可以直接看到服务已经启动了。

\n\n\n

2、如果需要兼容ie,需要安装babel-polyfill包npm i babel-polyfill -S

\n\n\n

3、对于企业来说,可能ie的默认以低版本打开可能页面还是一片空白,这时候需要设置meta标签,<meta http-equiv=”X-UA-compatible” content=”IE=edge”>

\n\n\n

完成项目初始化后可以添加一些常用的插件:axios,element-ui,less,less-loader,vuex

\n\n\n

安装完就可以快乐的coding了。

\n

相关文章

评论 (0)

暂无评论,来写第一条吧