Vue创建项目的基本流程

浅浅的花香味﹌ 2024-04-17 23:33 64阅读 0赞

1.安装node.js环境

可以去官网下载安装包:[https://nodejs.org/][https_nodejs.org]

安装好后,可以输入node -v

npm -v

成功的话会显示相应的版本号

2.安装vue-cli VUE脚本架工具

npm install -g vue-cli

\#回车,等待安装

vue -V

\#若出现vue信息说明成功

3.用vue-cli构建项目

vue init webpack vuedemo(这个可以是全路径+项目名称)

\#这里需要进行一些配置,默认回车即可

? Project name vuedemo
    ? Project description A Vue.js project
    ? Author
    ? 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? (reco
    mmended) npm

4.进入项目文件中

cd vueDemo

npm install

npm run dev

成功执行以上命令后访问 [http://localhost:8080/][http_localhost_8080]，输出结果

在浏览器中访问 [http://localhost:8080/][http_localhost_8080]，会显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E4NzM3NDQ3Nzk_size_16_color_FFFFFF_t_70][]

总上所述，安装vue-cil后执行四行命令，就可以把一个名为`vuedemo`的项目跑起来。

> 进入项目文件夹后`vue init webpack vuedemo`新建一个项目
> 
> 进入项目`cd vuedemo`
> 
> 创建项目`npm install`
> 
> 运行项目`npm run dev`

注意:

前提条件：node.js 、vue-cli、webpack安装好，配置好淘宝cnpm源。

本来执行vue init webpack projectName 一路配置，最后npm run dev 就配置完了。

但是，天公不作美。总要出点幺蛾子。这不我这就出了

报错 ：

![20190902223505466.png][]

接下来就开始一段疯狂的找错模式

我本来还不信邪，继续 npm run dev

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E4NzM3NDQ3Nzk_size_16_color_FFFFFF_t_70 1][]

但是现实总是会清楚的让你知道，你得好好找问题。

好，那就找吧，打开生成的文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E4NzM3NDQ3Nzk_size_16_color_FFFFFF_t_70 2][]

乍一看没什么是，其实仔细看你会发现缺了一个文件夹，

没错，缺了 node\_modules 这个node的依赖文件夹

好了，找到问题就好解决了，

cd 进入项目文件夹 ，然后 cnpm install 安装node依赖

![20190902223602123.png][]

然后再去 npm run dev 试试，

Surprise

![20190902223612228.png][]

跑成功了

[https_nodejs.org]: https://nodejs.org/
[http_localhost_8080]: http://localhost:8080/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E4NzM3NDQ3Nzk_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/dd1171b4e7684f2fa30cbc21347b0dec.png
[20190902223505466.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/93f4de19e722458ba748ac3ff448f458.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E4NzM3NDQ3Nzk_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e399450c82d6450e833e518522e17d4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E4NzM3NDQ3Nzk_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/d58bef1e56484c07a89ae14a69c23294.png
[20190902223602123.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c9d0e51c42494dd79d79da679590abd9.png
[20190902223612228.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b788726dca28438cb8b4784bd18c9ced.png