命令行生成vue项目框架

r囧r小猫 2022-06-17 00:24 150阅读 0赞

# 安装nodejs #

用命令行生成vue项目框架需要npm包管理器来安装,而npm又是在安装nodejs的时候同时安装的,

所以首先要安装nodejs,学习vue有必要了解下nodejs和npm的基本知识:

[nodejs安装: http://blog.csdn.net/zzwwjjdj1/article/details/51980082][nodejs_http_blog.csdn.net_zzwwjjdj1_article_details_51980082]

[npm 介绍: http://blog.csdn.net/zzwwjjdj1/article/details/51982433][npm _http_blog.csdn.net_zzwwjjdj1_article_details_51982433]

# \-- 安装命令行工具 #

npm install -g vue-cli

\-g表示全局安装, vue-cli是模块,全局安装的模块可以在命令行直接使用

![Center][]

红框里是安装命令,由于npm网站在国内速度非常慢,所以在命令后面加上淘宝的镜像,

很快就安装好了.也可以使用cnpm安装.

安装后在命令行输入 vue -version 能看到版本号表示全局安装成功,下面就可以使用命令行创建项目了.

![Center 1][]

# \-- 创建项目框架 #

vue init webpack vue-project

创建一个基于"webpack"的项目,后面是项目名

\----注：vue-cli 的模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。

\----webpack-simple 相对简单的，它根目录下才有个 webpack.config.js。

![Center 2][]

注意：项目建立过程中，有如下选择，选择NO。（该选项为使用ESLint规范你的代码，一个空格错误都将报错，不开启，可以避免不必要的麻烦）

\----ESLint规范建议开启，加强代码规范

![Center 3][]

按照提示输入,项目名,项目描述,项目作者 等等,看到最后这句项目就创建好了,

项目结构:这是没安装依赖时的项目结构

![Center 4][]

刚我们命令行输入的东西就在package.json这个文件里,打开文件

![Center 5][]

项目名字,版本,描述,作者等,后面还有运行项目命令,项目依赖,开发环境项目依赖等.

# \-- 安装依赖 #

生成了项目以后是不能直接运行的,现在很多项目都依赖许许多多的模块,需要逐一安装,

ctrl+c 停掉刚生成项目的命令,cd vue-project 进入项目跟目录, 用命令npm install 安装

![Center 6][]

同样是使用淘宝镜像.

![Center 7][]

当这个命令运行完成以后会多出一个node\_modules文件夹,里面就是项目所需的所有依赖

![Center 8][]

可以看到有很多模块,这些模块都是在package.json文件里定义好了的.

![Center 9][]

dependencies是项目依赖,

devDependencies是开发时项目依赖.

# \-- 运行测试 #

好了,依赖安装完成后就可以运行我们的项目了命令:

npm run dev

![Center 10][]

看到这样的输出，项目就运行起来了,然后打开浏览器,输入第二个红框的地址 [localhost:8080][localhost_8080],

浏览器截图：

![Center 11][]

项目就运行起来了.命令行生成的vue项目,还支持热启动,当项目文件有改动的时候,页面会自动变化,

[意外金喜的博客 : http://blog.csdn.net/zzwwjjdj1][_http_blog.csdn.net_zzwwjjdj1]

原文链接：[http://blog.csdn.net/zzwwjjdj1/article/details/52687488][http_blog.csdn.net_zzwwjjdj1_article_details_52687488]

[nodejs_http_blog.csdn.net_zzwwjjdj1_article_details_51980082]: http://blog.csdn.net/zzwwjjdj1/article/details/51980082
[npm _http_blog.csdn.net_zzwwjjdj1_article_details_51982433]: http://blog.csdn.net/zzwwjjdj1/article/details/51982433
[Center]: /images/20220617/56837331b8d74c79bff3fba31e8d5c26.png
[Center 1]: /images/20220617/57173d0d4fd141e9bec94aff26064100.png
[Center 2]: /images/20220617/e73a3b34dba14886896b7b0089991e9a.png
[Center 3]: /images/20220617/18934d0d38e748f2b764cb31da93e471.png
[Center 4]: /images/20220617/6da272bde5204fcfba6e4f0810684b80.png
[Center 5]: /images/20220617/23860d9f60714d36b789605a948a173b.png
[Center 6]: /images/20220617/0075cd6a082e41bd84f6654adaf59f73.png
[Center 7]: /images/20220617/010e0c6d642343c78a8b3d803acc1558.png
[Center 8]: /images/20220617/a764e6edbb274045af440bc97456d918.png
[Center 9]: /images/20220617/9696eccbeb7c4343b4be988a8ee5fd2e.png
[Center 10]: /images/20220617/37c9f78465fc4559aba2252cddfe307d.png
[localhost_8080]: http://localhost:8080/
[Center 11]: /images/20220617/7330c02b1e964462ae5d016e99f6857c.png
[_http_blog.csdn.net_zzwwjjdj1]: http://blog.csdn.net/zzwwjjdj1
[http_blog.csdn.net_zzwwjjdj1_article_details_52687488]: http://blog.csdn.net/zzwwjjdj1/article/details/52687488