搭建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