Vue 环境配置及创建项目

1.Node.js的安装

Vue环境运行依赖Node.js,首先安装Node.js.Node.js的官方网站https://nodejs.org/en/download/,选择对应的版本下载,本文的环境为Windows 64位,选择Windows Installer(.msi) 64安装,按照提示安装即可。安装结束可输入 node -v 查看版本。

2. npm的安装。

安装完成node,node有自带的npm,可以直接在cmd中,找到nodeJs安装的路径下输入 npm -v 查看版本,我的安装目录是D:\nodejs

 

3.安装vue-cli

在安装vue-cli 之前建议先把nodejs 和npm的版本更新到最新版本,nodejs的版本直接去官网下载最新的安装就行了,(或者1.先清缓存 npm cache clean -f  2.安装n模块npm install -g n --force 3.进入安装目录查看安装版本 node -v),npm的最新版本可以先进去nodejs的安装目录,然后执行npm install [email protected] -g 就可以把npm更新到最新的版本。然后用 npm -v 查看是否是最新版本

最后执行npm install --global vue-cli 安装vue-cli,安装完成用 vue -V 查看版本 ,注意-V是要大写的。(更新vue-cli 请参考https://cli.vuejs.org/zh/guide/installation.html和https://www.jianshu.com/p/8cf4b0dea0d0)

 

出现图中的警告可以不管它,让它安装完就可以查看安装版本了。

4.创建应用

在合适的地方创建文件根目录,我的是在F盘目录下创建一个保存vue

项目的文件夹F:\VueProject,然后进入该目录 执行vue init webpack my_second_project 命令创建项目 ,我的项目叫my_second_project

然后就是输入一下项目的相关信息。

途中框起来的尽量填写No , 注意:项目建立过程中,有如下选择,选择NO。(该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,可以避免不必要的麻烦)

创建完项目后会提示是否执行npm ,系统会自动执行

等待它执行完毕

见到这句话就证明创建成功了。

接着进入创建的项目根目录,cd my_first_project,其实现在的安装已经很智能了,cmd都会提示你怎么做

相继执行上面的操作就可以,其实第一个就是进入项目目录,第二个就是把项目执行在生产环境启动项目

启动完项目就可以在http://localhost:8080  路径下查看我们新建的项目内容了

 

按着Ctrl + c 就会出现上面的内容,意思是是否终止操作

5.如何启动一个已经创建的项目

进入项目的父目录,也就是创建项目的时候保存项目的父目录,在上面中我们创建的项目的父目录是F:\VueProject ,所以我们进去到这个目录,然后执行 npm install,npm install 命令的作用就是打包项目。

执行完毕在进入项目F:\VueProject>cd my_first_project

再执行npm run dev

最后就可以打开浏览器查看了

相关技术方案:

错误信息:http://www.javashuo.com/article/p-bfsmghgi-bs.html

WebStorm启动vue:

https://blog.csdn.net/Dora_5537/article/details/87921443

https://www.cnblogs.com/Sweepingmonk/p/10868255.html

https://www.cnblogs.com/Sweepingmonk/p/10868255.html