Vue2.0入门 - 创建Vue项目

最新推荐文章于 2025-04-17 21:13:16 发布

mingyangz

最新推荐文章于 2025-04-17 21:13:16 发布

阅读量447

点赞数

文章标签： Vue 前端开发

本文链接：https://blog.youkuaiyun.com/iosYangming/article/details/83000985

版权

本文介绍了如何进入Vue2.0的开发世界，从配置必要的Node.js环境到使用Vue CLI创建Vue应用。通过官方文档学习，使用npm或cnpm管理依赖，设置Vue CLI并初始化webpack项目模板，最后通过npm运行dev启动第一个Vue应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在web开发应该是很火的. 随着前端技术的成熟, 手机性能提升. webApp 已经越来越接近原生体验.

原生开发也应该掌握混合开发的能力,毕竟现在多数公司都要求hybrid开发经历.(好好中文不用,非要hybrid)

因为公司项目Vue用的比较成熟, 跟着学习了一波

一配置必要环境

学习任何一门语言官方资料永远都是最重要,也是必须要了解的 Vue官网

官网提供了教程和各种学习实例.有经验的可以在官网学习.

Vue.js. 看名字就知道是JavaScript框架. 需要node.js支持.

打开终端执行命令 npm -v

Ym:~ shinho$ npm -v
5.6.0
Ym:~ shinho$

如果电脑安装了node.js,会显示当前使用的node.js版本. 如果没装会提示 npm command not found. 那就去安装node去吧

由于天朝墙的存在,有些资源会被屏蔽或者下载贼慢.最好给npm切换淘宝镜像源 cnpm

执行命令 npm install -g cnpm --registry=http://registry.npm.taobao.org 即可

Ym:~ shinho$ npm install -g cnpm --registry=http://registry.npm.taobao.org
npm WARN deprecated socks@1.1.10: 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
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ cnpm@6.0.0
added 21 packages, removed 29 packages and updated 75 packages in 43.764s
Ym:~ shinho$

万事俱备,准备撸Vue

这个不得不提vue脚手架. vue-cli (这个是官网推荐的快速构建Vue应用脚本,但是不推荐新手直接通过脚手架创建Vue应用)

执行命令 npm install --global vue-cli

完事之后现在vue 所有的准备工作就OK了.

查看Vue版本 Vue --version

二创建Vue应用

选择一个目录,准备创建应用. 比如某个路径的VueDemo文件夹

cd 到这个文件夹. 执行

vue init webpack firstVue

Ym:~ shinho$ cd /Users/shinho/VueDemo 
Ym:VueDemo shinho$ vue init webpack firstVue 

? Project name demo
? Project description vue 应用demo
? Author shinho <zhangmingyang@shinhofood.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)
❯ Yes, use NPM 
  Yes, use Yarn 
  No, I will handle that myself

按照提示逐步执行即可. 最后一步使用 use NPM.

接下来就会开始配置这个 Vue应用了

配置完之后. cd 到应用目录

执行 npm run dev. 然后就可以看到第一个vue应用启动成功了

Ym:vuedemo shinho$ cd firstVue/
Ym:firstVue shinho$ npm run dev

> demo@1.0.0 dev /Users/shinho/VueDemo/firstVue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                 b      
 DONE  Compiled successfully in 2615ms                                  18:43:56

 I  Your application is running here: http://localhost:8081