从零搭建Vue项目

搭建Vue项目

一、安装 node 环境

        1、下载地址为：Node.js

        2、检查是否安装成功：如果输出版本号，说明安装node 环境成功

        

        3、淘宝镜像：npmmirror 中国镜像站

                执行 npm install -g cnpm –registry=https://registry.npm.taobao.org，安装npm镜像，检查是否安装成功

     

4、补充

        若出现 'cnpm' 不是内部或外部命令，也不是可运行的程序 或批处理文文件 问题

        详情参考 ：'cnpm' 不是内部或外部命令，也不是可运行的程序 或批处理文文件 问题解决_前端大白YJH的博客-CSDN博客_cnpm' 不是内部或外部命令,也不是可运行的程序；

二、搭建Vue项目环境

        1、全局安装 Vue-cli，npm install --global vue-cli

        2、进入项目目录，创建一个基于 webpack模板的项目： vue init webpack 项目名称

        3、创建过程说明

                1）Vue build ==> 打包方式，回车即可；

                2）Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；

                3）Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 N 回车；

                4）Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 N 回车；

                5）Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 N 回车；

        4、进入项目目录

                cd crm-web，安装依赖 ： cnmp i

        5、安装成功后，项目文件夹多出一个目录

                文件夹：node_modules

        6、项目启动

                 npm run dev

        7、项目停止

                 ctrl + c

三、Vue项目目录结构

        1、build： 构建脚本目录

                1）build.js ==> 生产环境构建脚本

                2）check-versions.js ==> 检查npm 、node.js 版本

                3）utils.js ==> 构建行管工具方法

                4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀

                5）webpack.base.conf.js ==> webpack基本配置

                6）webpack.dev.conf.js ==> webpack开发环境配置

                7）webpack.prod.conf.js ==> webpack生产环境配置

        2、config ：项目配置

                1）dev.env.js ==>开发环境变量

                2）index.js ==> 项目配置文件

                3）prod.env,js ==> 生产环境变量node_modules: npm 加载的项目依赖模块

        3、src ：开发目录

                1）assets：资源目录，放置一些图片或者公共JS、CSS，这里的资源会被webpack构建；

                2）components：组件目录，我们写的组件就在这个目录里

                3）router：前端路由，配置路由路径写在xindex.js文件

                4）App.vue：根组件

                5）main.js ：入口js文件

        4、static ： 静态资源目录，如图片、字体等。不会被webpack构建

        5、index.html：首页入口文件，可以添加一些meta信息等

        6、package.json ：npm包配置文件。定义了项目的npm脚本，依赖包等信息

        7、README.md ：项目说明文档，markdown格式

        8、xxx文件：一些配置文件，包括语法配置，git配置等

四、创建项目

        1、在 src/components目录下新建 views 目录，存放vue组件

                1）在 views 目录下创建 First.vue文件

                2）编写First.vue组件： temple 写html 、script 写js 、style写样式

                3）配置路由：src/router/index.js

                4）启动项目 ，访问 localhost:8080/#/first

        2、使用 路由搭建单页应用

                1）新建一个Second.vue组件，在src/router/index.js 配置路由

                2）在First.vue文件，路由跳转：去第二个页面

                3）在Second.vue文件，路由跳转：去第一个页面

                4）访问：观察路径变化

        3、安装less

                1）安装less依赖：npm install less less-loader --save

                安装成功之后，可在package.json中看到，多增加了2个模块：

        4、补充

                在安装 npm less 时 报错npm ERR! ERESOLVE unable to resolve dependency tree

                安装less-loader出错，可能是npm版本过高、less-loader版本问题。

                降低版本： npm install npm@6.14.10 -g

                详见 ： https://blog.csdn.net/weixin_47577540/article/details/118913394

五、补充

        1、删除镜像配置：npm config delete registry

        2、Vue项目自动打开浏览器，修改端口

                1）打开config  ==> index.js

                2）module.exports配置中找到autoOpenBrowser，默认设置的是false，将autoOpenBrowser改为true