Vue 项目环境搭建

'''
1) 安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
详情安装: https://www.cnblogs.com/zhi-leaf/p/10979629.html

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

3) 安装vue项目脚手架
>: cnpm install -g @vue/cli

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

node 类似 python
npm 类似 pip
vue 类似 django
'''

(安装与换源)

node升级

Vue项目创建

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

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

3) 项目初始
'''

Vue 项目环境搭建

Pycharm配置并启动vue项目

'''
1) 用pycharm打开创建的vue项目
2) 添加配置npm启动
'''

Vue 项目环境搭建

结构

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

├── luffycity
    ├── public/                      # 项目共有资源
        ├── favicon.ico                # 站点图标
        └── index.html                # 主页
    ├── src/                          # 项目主应用，开发时的代码保存
        ├── assets/                  # 前台静态资源总目录
            ├── css/                # 自定义css样式
                └── global.css        # 自定义全局样式
            ├── js/                    # 自定义js样式
                └── settings.js        # 自定义配置文件
            └── img/                # 前台图片资源
        ├── components/                # 小组件目录
        ├── views/                  # 页面组件目录
        ├── App.vue                    # 根路由
        ├── main.js                    # 入口脚本文件
        ├── router            
            └── index.js            # 路由脚本文件
        store                
            └── index.js            # 仓库脚本文件
    ├── vue.config.js                # 项目配置文件
    └── *.*                            # 其他配置文件

View Code