vue 项目中使用粘性布局不起作用_vue项目构建中遇到的坑及解决办法

一：如何使用vue-cli创建项目

1、安装好了node.js

2、安装 vue-cli

npm install -g vue-cli //-g表示全局安装

3、创建新项目

vue init webpack 项目名字

4、进入项目文件夹

cd 项目文件夹

5、安装依赖

npm install //在项目文件夹下面执行

6、运行项目

npm run dev

***注意：上述方法是基于vue2.X，已经过时，建议采用更新的基于vue3.X的方式创建***

***项目内运行yarn run build，就会生成一个build文件夹和一个dist文件夹，dist文件夹即压缩处理之后的静态资源文件夹，里面的html文件可以在服务器上运行***

二：vue-cli+webpack项目怎样修改项目名称

使用vue-cli+webpack创建的项目，修改文件名称或者更改文件的位置，运营时会报错，是因为npm项目，在安装依赖(node_nodules)时，会记录当前的文件路径，当修改之后就无法正常启动。

解决办法：

1 、删除 node_modules 文件夹

2、在package.json中修改对应的name(最好全局搜索，将应用到旧项目名的地方统一改过来)

3、 重新安装依赖 npm install

4 、启动项目 npm run dev

三：运行 npm run dev时报错npm ERR! 项目名@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

原因：新版的webpack-dev-server存在问题。

解决方法：package.json 中指定 webpack-dev-server 低版本号

方法1：

"webpack-dev-server": "^2.9.1"

删除 node_modules 目录，再重新安装依赖包

npm install -S // 这种方式安装的时间会长些，也可以只重装 webpack-dev-server模块

方法2：单独重装 webpack-dev-server模块

1、npm uninstall webpack-dev-server

2、npm install webpack-dev-server@2.9.1

3、npm run dev

四：Vue的devtools构建错误npm ERR! code ELIFECYCLE解决办法

安装vue-devtools工具时，运行npm run build 发生报错：

该问题的原因是我们git clone时默认分支为最新的develop分支。develop是测试分支，不是正式分支，git clone时更换分支即可。

网查资料显示v5.1.1分支是可用的，估计再向前的分支也是可用，当然master分支更是可用。

正确获取方法(使用分支:v5.1.1)

1.克隆

用cd命令找到想要安装的路径，运行git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git；

2.安装依赖

进入vue-devtools文件夹下，运行npm i 或 cnpm install；

3.构建

npm run build；

4.chrome中找到 更多工具 / 扩展程序 选项，勾选 开发者模式，然后点击 加载已解压的扩展程序，选择vue-devtools\shells\chrome，确认

5.谷歌运行一个vue项目，查看控制台是否出现Vue功能栏，有则是安装成功。

五：VS Code可以通过以下快捷键格式化代码:

1. windows:Shift + Alt + F

2. Mac:Shift + Option + F

六：使用vue-cli3创建项目时遇到的坑

在目标文件夹“右键” => “Git Bash here”，打开命令行，输入vue create project-name，回车，结果发现项目配置参数选择时，git bash的箭头选择无效

解决办法：

选择git bash 的安装目录，找到Git/etc/bash.bashrc文件 (我的目录是C:\Program Files\Git\etc\)

文件末尾添加 ： alias vue='winpty vue.cmd'

关闭所有git bash，再重新打开既可

或者直接 window+r，输入cmd，打开cmd窗口，cd到目标文件夹，再vue create project-name