VUE 环境搭建安装 项目创建 pycharm配置启动 结构分析

一、Vue项目环境搭建

1.对比django

node ~~ python：node是用c++编写用来运行js代码的，是vue运行的基础
npm(cnpm) ~~ pip：npm是一个终端应用商城，可以换国内淘宝源cnpm，mac系统中还有其他源
vue ~~ django：vue是用来搭建vue前端项目的

2.安装流程

1) 安装node（终端打开后 ctrl+c 退出  node -v 版本）
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2) 换源安装cnpm
>: npm install -g cnpm --registry=https://registry.npm.taobao.org

3) 安装vue项目脚手架 （vue --version查看版本）
>: cnpm install -g @vue/cli

注：2或3终端安装失败时，可以清空 npm缓存 再重复执行失败的步骤
npm cache clean --force

二、Vue项目创建

一般都用终端创建，pycharm打开，不要用pycharm创建

1) 进入存放项目的目录
>: cd ***

2) 创建项目
>: vue create 项目名

3) 项目初始化

 

 

 

三、pycharm配置并启动vue项目

1) 用pycharm打开vue项目
2) 添加配置npm启动
3) 下载vue.js模块，下载后重启，代码即可被识别，高亮显示
4) 默认两个空格代表tab，我们一键整理代码

 

四、项目目录结构分析

|├── v-proj
|    |├── node_modules      // 当前项目所有依赖，一般不可以移植给其他电脑环境，传输时删除掉
|    |├── public            
        ├── favicon.ico    // 标签图标
        └── index.html    // 当前项目唯一的页面，因为只有一个页面所以vue可以控制整个项目
|    |├── src
        |├── assets        // 静态资源img、css、js
        |├── components    // 小组件
        |├── views        // 页面组件
        ├── App.vue        // 根组件
        ├── main.js        // 全局脚本文件（项目的入口）
        ├── router.js    // 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
        └── store.js    // 仓库脚本文件（vuex插件的配置文件，数据仓库）
|    ├── README.md
└    └── **好多配置文件