一,环境搭建

        1.1下载安装node及npm

                       1.1.1  官网下载安装next---.

                       1.1.2  打开cmd窗口(如果在系统盘(c盘)下安装,应以管理员身份打开cmd,否则会报错权限不够)node -v查看版本 (确保完成安装)

                       1.1.3  设置环境变量

                                         npm config set prefix "D:\Program Files\nodejs\node_global"

                                         npm config set cache"D:\Program Files\nodejs\node_cache"

                       1.1.4   查看文件夹是否生成

 


 

                       1.1.5 修改环境变量

                                在系统环境变量添加NODE_PATH,输入路径为: 

                                                                        D:\Program Files\nodejs\node_global 

                                                                        操作如下:我的电脑右击,打开属性->高级系统设置->环境变量->新建(系统变量下)->输入变量名NODE_PATH->变量值:

 

 

                        1.1.6  安装express

                                       输入 npm install express -g

 

                                        安装成功!

        1.2下载cnpm淘宝镜像

                       1.2.1  输入npm install -g cnpm --registry=https://registry.npm.taobao.org

                       1.2.2  cnpm -v 检测是否安装成功

 

 

二,构建项目

                        安装好以上内容之后   输入    vue init  webpack  projectName(项目名称)

 

 

三,项目目录结构

                    |— build                                        # (webpack配置相关)

                    |    |— build-server.js                    # 运行本地构建服务器,可以访问构建后的页面

|    |— build.js                               # 生产环境构建脚本

|    |— dev-client.js                       # 主要用来实现开发阶段的页面自动刷新(热重载)

|    |— dev-server.js                      # 运行本地开发服务器

|    |— utils.js                                # 构建相关工具方法

|    |— webpack.base.conf.js       # wabpack基础配置

|    |— webpack.dev.conf.js          # wabpack开发环境配置

|    |— webpack.prod.conf.js        # wabpack生产环境配置

|— config                                     # 配置目录,包括端口号等

|    |— dev.env.js                          # 开发环境变量

|    |— index.js                              # 项目配置文件

|    |— prod.env.js                         # 生产环境变量

|    |— test.env.js                          # 测试环境变量

|— node_modules                       # npm||cnpm install 安装的依赖代码库

|— src                                          # 存放项目源码

|    |— assets                               # 放置一些图片,如logo等

|    |— components                      # 目录里面存放一些公共组件

|    |— App.vue                            # 根组件

|    |— main.js                              # 入口js文件

|— static                                      # 存放静态资源(图片、字体等),不会被wabpack构建

|    |— .gitkeep                             # 当static目录为空文件夹时git也可以提交到代码仓库

|— test                                         # 测试文件目录

|— .babelrc                                  # babe文件的编译配置

|    |— presets                              # 预设转码规则

|    |— plugins                              # 除了预设的,还可以根据自己的需求添加其他转码插件

|    |— comments                         # 转换后代码生不生成注释

|— .editorconfig                           # 编辑器的配置

|    |— charset                              # 编码

|    |— indent_style                       # 缩进风格

|    |— indent_size                        # 缩进长度

|    |— end_of_line                       #  换行风格

|    |— insert_final_newline          # 创建一个文件是否自动在文件末尾插入一个新行

|    |— trim_trailing_whitespace   # 移除文件末尾多余的空行

|— .eslintignore                           # 忽略语法检查的目录文件

|— .eslintrc.js                              # eslint的配置文件

|— index.html                              # 入口页面

|— package.json                         # npm包配置文件

|— favicon.ico                             # 网站图标

posted on 2019-10-11 12:16  __Runner  阅读(144)  评论(0编辑  收藏  举报