vue的安装与使用

Posted 2020-12-02 wazh

首先这里记录的是基于安装node.js 的npm安装vue  如果你不是用的node与npm  那就不必往下看了

1.安装node.js这个不多说   百度有很多

2.安装webpack

全局安装webpack(直接安装全局即可，以后要经常使用，安装后直接进入第三步)
npm install webpack -g

这里补充一下 

全局安装就是装一次任何时候任何项目都可以直接使用，一般情况下我是在C盘或者D盘根目录下创建一个www文件夹，（路径一切非包含中文）

然后所有的项目都放到这个www文件夹里面   全局安装的插件什么的包括后期创建的项目都需要先cd到www文件后执行npm命令，

这样便于管理和后期查找项目文件和配置文件  

依赖项安装是cd 到项目后安装   仅作为这个项目的使用依赖项   其他项目不能公用

 

通常我们会将webpack安装到项目依赖，这样就可以使用本地版本的webpack（不安装全局,作为依赖项也可以）
//node启动   cd进入项目目录
//确定已有package.json，没有就npm init 创建
$ npm install webpack --save-dev

//查看webpack 版本信息
$ npm info webpack
//安装指定版本
$ npm install [email protected] --save-dev
如果要使用webpack开发工具，要单独安装 webpack-dev-server
$ npm install webpack-dev-server --save-dev

3.安装vue-cli脚手架   脚手架集成了很多必须的包和配置   也是官方推荐的安装

单页面应用环境一次性搭建   官方推荐    底层基于webpack搭建的

全局安装 vue-cli
npm install --global vue-cli

4.创建一个vue基于 webpack 模板的新项目 在www目录下
vue init webpack my-project         (my-project)是项目名字，非中文  可以自己更换   

然后自动下载东西（模板）   几秒钟后问你文件名字确定用这个   可以更改

这里我不改了

然后回车-回车-回车-再回车（应该是四下）   慢点  接着出现   y/n选项了

这里我们输入y (第一次)  

下面又出现y/n （下面的几项全选n，应该是三个n）也就是只有第一个是y

这里停顿一下  千万不要按快了   出现下面选项 （需要执行严格模式之类的）就是你编写代码的时候  上下行格式必须有空四格，必须加引号之类的

这里我们选择最后一个No, I will handle that myself   方向键控制    然后回车

>Yes, use NPM
Yes, use Yarn
No, I will handle that myself（选择这一项）

然后cd到你的项目文件夹下（必须   否则报错）

D:www>cd my-project

然后输入指令  npm i  安装项目所需要的依赖包   

如果npm安装不上的话，可以使用淘宝镜像cnpm安装  前提是先安装淘宝镜像（自行百度，或者看我的另一个文章）

并且如果你的安装过程中开始如果使用了npm  就绝对不能在使用cnpm  反之同样

（查看当时用什么方法安装的可以打开项目本地D:wwwmy-project ode_modules文件夹，一直往下拉,看文件夹图标带不带快捷方式的小箭头，如果有就是cnpm方式，正常文件夹图标就是npm方式安装，这个只有在安装后执行npm run dev命令后才有这个node_module文件夹）

好了  一个基于webpack的vue项目文件就创建完成了

下面我们cd 到项目文件中   我的在D盘   根据自己的选择

D:www>cd my-project

然后npm run dev（或者npm start）   回车  等个几秒钟  出现 Your application is running here: http://localhost:8080

浏览器会自动打开localhost:8080   看到vue页面就可以了   如果没有自动打开 就自己输入地址打开  这个无所谓的

然后打开本地的项目文件夹  拖到Hbuider 或者vscode编辑器中就可以开始编辑项目了  这里推荐vscode  安装vetur插件  很好用

 

  当我们安装完成后就可以安装其他的vue全家桶  需要什么装什么

npm i element-ui -S           安装饿了么UI框架
npm install axios　　　　安装axios,官网推荐安装的封装的ajax　
npm install vuex --save      这个一般大点的复杂项目用

对于安装完成后项目的每个文件是用处可以百度或者点击菜鸟教程的  http://www.runoob.com/vue2/vue-directory-structure.html   进行查看