Vue入门&注意事项

一、简介

  • vue是前端开发中交为常用的框架,

  • vue-cli是vue的脚手架工具,具有所占内存少、开发高效等特点,简单说vue-cli使得vue开发更简单。

  • cli:command-line-interface命令行界面(字符用户界面)

    二、安装环境及创建项目

1、安装环境

  • npm:node package manager,node的包管理器。推荐使用淘宝镜像来安装npm,官方网速太慢。
    1
    npm install -gd express --registry=http://registry.npm.taobao.org
    2
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    2、创建项目
  • 创建vue-cli2
1
vue init webpack 项目名字 #创建vue-cli2的项目:
2
npm run dev #每次启动VUE服务器
  • 创建vue-cli3
1
vue create 项目名字 #创建
2
vue run serve    #运行
  • 二者区别:cli3中取消了webpack,框架结构更简单,推荐使用cli3。
  • 注意:创建vue项目时先不要选择eslint!真的费事!!eslint是用于校验js语法,js写的不规范一直警告报错,修改过package.json,仍然无果,最后重建项目;每次打开vue项目时在cmd中进入到相应文件夹中,运行 vue run serve即可,在浏览器中可查看。一般地址为localhost:8080

##三、报错及解决
This dependency was not found:* app.js?vue&type=script&lang=js& in ./src/App.vue
To install it, you can run: npm install –save app.js?vue&type=script&lang=js&

可能报错原因

1、在APP.vue中需要引入app.js文件,但是无法找到该文件
此时应当考虑js文件引入的路径是否正确,我在这个问题上找了老半天,就是因为路径问题;
报错时:在App.vue中是这样的

1
<script src="app.js"></script>

修改后:是这样的(./ 之差)

1
<script src="./app.js"></script>

2、在app.js中需要引入其他vue文件
在项目重启后,app.js找不到当时引用的vue文件了,可能是在项目重启后引用 的vue文件默认为和app.js同一路径,此时需要修改vue的文件路径,重新import
修改前:

1
import AppHeader from "./components/AppHeader";

修改后:

1
import AppHeader from "./components/AppHeader.vue";