vue安装及环境搭建

vue项目在pycharm里运行需要安装一个插件，打开settings，找到plugins，里面搜索vue.js,点击安装。

vue安装

先安装node.js

npm install -g @vue/cli

vue create my-project

cd my_project

npm run serve

npm install axios

中间的一些选择就不写了

提示是否使用以前的router 选择no 询问是否保存项目将来使用选择yes 选择依赖包（1，4，5 ==》router，vuex）

Axios中文文档：https://www.kancloud.cn/yunye/axios/234845

vue项目的运行：

在webstorm里直接打开创建好的目录，在pycharm里也可以，只是在pycharm里需要安装一个插件，点第一行会出来提示安装的信息。

点开项目运行按钮旁边的editconfigitions，左上角的+号选择npm，弹出的框里scripts选择serve，这样就不用再输入命令才能打开vue项目了。

vue项目常用依赖包命令安装

接下来是一些常见的依赖包
1.webpack模块打包
    npm install –save-dev webpack
    4.0以上版本使用 npm install –save-dev webpack-cli
    webpack 与 less最好不要全局安装，否则可能导致webpack的版本差异

2.babel 可以将es6语法转为es5
    npm install babel-core –save-dev
    npm install babel-loader –save-dev
    安转完后可能会导致webpack无法使用需要重新安装

3.css-loader 将css解析成模块，将解析的内容插入到页面
npm install css-loader style-loader –save-dev

4.解析图片
file-loader url-loader(依赖于file-loader)
npm install file-loader url-loader –save-dev

5.需要解析html插件
插件的作用是以我们自己的html为模板将打包后的结果，自动引入到html中产出到dist目录下
npm install html-webpack-plugin –save-dev

6.webpack-dev-server
    内置一个服务可以启动一个端口号，当代码更新时可以自动打包（内存中打包）
    不生成实际的文件监听代码当代码有变化就重新执行
    npm install webpack-dev-server –save-dev
    安装提示无权限时 cmd可以用管理员模式打开
    package.json中 script “dev”: “webpack-dev-server”

7.这里介绍如何使用npm一键安装package.json里的dependencies 和devDependencies里的所有模块。

npm install 默认安装package.json中的所有模块。

8.这里安装的package.json中所有依赖的模块，都是package.json中指定的版本。如果需要安装最新的版本则要：

npm update <package_name>//要安装的模块的名字

秒客网

vue安装及环境搭建

相关文章