安装 node | 创建 vue 项目 | 保姆级教程

79 阅读2分钟

安装 node.js

node.js 就像我们的Python解释器一样,是必须要的。我们去官网下载

官网下载地址

image.png

安装成功

安装成功后,我们可以打开 terminal 查看一下是否真的安装成功

输入指令:node -v 你会看到你安装的 node 版本

可以再测试一下是否能运行

输入指令: console.log('Hello World!')

ctl + C 退出

安装镜像 cnpm

在 node 里面 npm 就像 pip 指令一样,但是有时候会很慢很慢。我们大多数会去淘宝镜像站里面去装一个 cnpm 指令。

terminal 输入指令:npm install -g cnpm --registry=https://registry.npm.taobao.org

苹果用户 有时候会报错,记得要用超管用户 加上 sudo指令

安装 vue/cli 脚手架

通过 cnpm 指令 安装架构

cnpm install -g @vue/cli

image.png

创建项目

可以通过指令: vue create 项目名 来在terminal里面创建项目

或者通过指令: vue ui获取浏览器图形化界面。

image.png

运行项目

terminal 指令: sudo npm run serve

在PyCharm里面 add configuration 里面添加 serve 脚本

vue 项目结构

vueProject --- 项目名:

-node_modules

文件夹,放了该项目所有的依赖,很小但是很多,以后我们把项目传给别人的时候,这个要删除。别人拿到,只需要执行 cnpm install即可重新安装回来 (安装依赖) 非常有用

这里需要注意,我们用的时候 -node_module是必须要有的,不然跑不起来

public 文件夹

文件夹

-favicon.ico 图标

-index.html spa.

这个HTML是这整个项目唯一的HTML文件

我们不需要动这个文件

src 文件夹

存放所有的代码

不要动

assets 文件夹

这里面放一些静态资源

components 文件夹

以后小组件 写在这里面

router

安装vueRouter就会有这个文件夹,不装就没有,现阶段不需要太过关注

index.js

store 文件夹

安装了vuex就会有,不装就不会

index.js

views 文件夹

里面放了所有的页面组件

AboutView.vue 首页组件
HomeView.vue 关于组件

App.vue 根组件

main.js

项目启动的入口文件,核心

-gitignore 文件夹

git相关, 后面会讲

README.md

md 文档,介绍项目

-package.json

存放 依赖 重要

-vue_config.js

vue项目的配置文件

-package-lock.json

锁定文件

babel.config.js

babel的配置文件

jsconfig.json

ES6 的导入导出 语法