安装 node.js
node.js 就像我们的Python解释器一样,是必须要的。我们去官网下载
安装成功
安装成功后,我们可以打开 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
创建项目
可以通过指令: vue create 项目名 来在terminal里面创建项目
或者通过指令: vue ui获取浏览器图形化界面。
运行项目
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的配置文件